<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
.tabnav ul{margin:0;padding:0;list-style:none;}
.tabnav li{padding:5 10px;border:1px solid red;float:left;}
.tabid {border:1px solid #000;clear:both;}
</style>
<script language='javascript'>
var temp = "tabid2";
function changeTab(n){
var tabnav = "tab"+n;
var tabid = "tabid"+n;
if(temp != tabid){
clearDislay(temp);
temp =tabid;
}
document.getElementById(tabid).style.display="block";
};
function clearDislay(tab){
var clearTabid = tab;
document.getElementById(clearTabid).style.display = "none";
}
</script>
</HEAD>
<BODY>
<div>
<div class='tabnav'>
<ul>
<li id='tab1' onclick='changeTab(1)'>TAB1</li>
<li id='tab2' onclick='changeTab(2)'>TAB2</li>
</ul>
</div>
<div id='tabid1' class='tabid'>tab1</div>
<div id='tabid2' class='tabid' style='display:none;'>tab2</div>
</div>
</BODY>
</HTML>
posted on 2010-07-12 17:11
ohgrateboy 阅读(6709)
评论(1) 编辑 收藏 所属分类:
HTML设计