标签：
原生js实现：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生js实现tab选项卡</title>
<style type="text/css">
*{margin:0;padding:0;font-family:"Microsoft Yahei";font-size:16px;}
ul li{list-style:none;}
#wrap{width:800px;margin:0 auto;/*background-color: grey;*/border-left:1px solid green;border-right:1px solid green;}
#header{height:100px;width:100%;background-color: #eee;}
#header h2{line-height: 100px;text-align: center;font-size: 24px;}
#mainbody{height:200px;width:400px;margin-left:10px;}
#mainbody ul{height:40px;text-align: center;}
#mainbody ul li{float:left; width:100px;height: 100%;background-color: grey;line-height:40px;}
#mainbody ul li.oncolor{background-color: #3C0;}
#div1,#div2,#div3,#div4{height:160px;width:400px;background-color: #ddd;}
</style>
<script type="text/javascript">
function tab(nav,num){
if(nav.className == "oncolor")
return;
var navList = document.getElementsByTagName("li");
var divList = document.getElementById("mainbody").getElementsByTagName("div");
for(var i=0;i<divList.length;i++){
if(i==num){
navList[i].className="oncolor";
divList[i].style.display="block";
}
else{
navList[i].className="";
divList[i].style.display="none";
}
}
}
</script>
</head>
<body>
<div id="wrap">
<div id="header">
<h2>CASE</h2>
</div>
<div id="mainbody">
<ul>
<li class="oncolor" onclick="tab(this,0)">首页</li>
<li onclick="tab(this,1)">生活</li>
<li onclick="tab(this,2)">娱乐</li>
<li onclick="tab(this,3)">更多</li>
</ul>
<div id="div1">首页</div>
<div id="div2" style="display:none;">生活</div>
<div id="div3" style="display:none;">娱乐</div>
<div id="div4" style="display:none;">更多</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
jquery：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生js实现tab选项卡</title>
<script src="jquery-1.4.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;font-family:"Microsoft Yahei";font-size:16px;}
ul li{list-style:none;}
#wrap{width:800px;margin:0 auto;/*background-color: grey;*/border-left:1px solid green;border-right:1px solid green;}
#header{height:100px;width:100%;background-color: #eee;}
#header h2{line-height: 100px;text-align: center;font-size: 24px;}
#mainbody{height:200px;width:400px;margin-left:10px;}
#mainbody ul{height:40px;text-align: center;}
#mainbody ul li{float:left; width:100px;height: 100%;background-color: grey;line-height:40px;}
#mainbody ul li.oncolor{background-color: #3C0;}
#div1,#div2,#div3,#div4{height:160px;width:400px;background-color: #ddd;}
</style>
<script type="text/javascript">
$(function(){
$("li").click(function(){
$(this).addClass("oncolor").siblings().removeClass("oncolor");
var index=$("li").index(this);
$("#mainbody div").eq(index).show().siblings().hide();
$("#mainbody ul").show();
});
});
</script>
</head>
<body>
<div id="wrap">
<div id="header">
<h2>CASE</h2>
</div>
<div id="mainbody">
<ul>
<li class="oncolor">首页</li>
<li>生活</li>
<li>娱乐</li>
<li>更多</li>
</ul>
<div id="div1" class="a">首页</div>
<div id="div2" class="a" style="display:none;">生活</div>
<div id="div3" class="a" style="display:none;">娱乐</div>
<div id="div4" class="a" style="display:none;">更多</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
标签：
原文地址：http://my.oschina.net/zyxchuxin/blog/423943
