<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选项卡</title>
<style>
* { margin:0; padding:0; }
ul { list-style:none; width:600px; border:1px solid #ddd; margin:0 auto; font-size:14px; }
#menu { background:#eee; height:30px; margin-top:100px; box-shadow:1px 0 10px #eee; }
#menu li { float:left; width:120px; text-align:center; height:30px; line-height:30px; border-right:1px solid #ddd; cursor:pointer; }
#menu li.active { background:#333; color:#fff; }
#content { border-top:none; border-radius:0 0 4px 4px; box-shadow:1px 1px 15px #eee; }
#content li { height:200px; display:none; padding:10px; }
#content li.current { display:block; }
</style>
</head>
<body>
<ul id="menu">
<li class="active">菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
</ul>
<ul id="content">
<li class="current">内容一</li>
<li>内容二</li>
<li>内容三</li>
</ul>
<script>
window.onload = function()
{
var tab_t = document.getElementById("menu").getElementsByTagName("li");
var tab_c = document.getElementById("content").getElementsByTagName("li");
for(var i=0; i<tab_t.length; i++)
{
tab_t[i].index = i;
tab_t[i].onclick = function()
{
for(var i=0; i<tab_t.length; i++)
{
tab_t[i].className = "";
tab_c[i].className = "";
}
tab_c[this.index].className = "current";
this.className = "active";
}
}
}
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> tab </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="kid">
<meta name="Keywords" content="tab">
<meta name="Description" content="tab">
<style type="text/css">
div,ul,li,dl,dd{margin:0;padding:0}
.demo{width:328px;height:auto;float:left}
ul{float:left;list-style:none}
ul li{width:80px;height:30px;float:left;border:1px solid #CBD8EB;border-bottom:none;background:#A9C9E2;color:#fff;line-height:30px;text-align:center}
ul li.on{background:#fff;color:#111}
dl dd{width:326px;height:100px;float:left;border:1px solid #CBD8EB;border-top:none;}
</style>
</head>
<body>
<div class="demo">
<ul id="tabMenu">
<li class="on">first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
</ul>
<dl id="tabContent">
<dd>i'm the first</dd>
<dd style="display:none">i'm the second</dd>
<dd style="display:none">i'm the third</dd>
<dd style="display:none">i'm the fourth</dd>
</dl>
</div>
<script>
var ma = document.getElementById('tabMenu').getElementsByTagName('li');
var ca = document.getElementById('tabContent').getElementsByTagName('dd');
for (i = 0; i < ma.length; i++) {
ma[i].onclick = (function(xf) {
return function() {
for (k = 0; k < ma.length; k++) {
ma[k].className = k == xf ? "on" : "";
}
for (j = 0; j < ca.length; j++) {
ca[j].style.display = j == xf ? "block" : "none";
}
};
})(i);
}
</script>
</body>
</html>
浙公网安备 33010602011771号