超简单的网页选项卡---jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页选项卡</title>
<script src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function(){
var $li=$(".tab_menu ul li");
$li.click(function(){
$(this).addClass("selected")
.siblings().removeClass("selected");
var index=$li.index(this);
$(".tab_box>div")
.eq(index).show()
.siblings().hide();
});
});
</script>
<style>
*{margin:0;padding:0;}
.tab{border:1px solid #000;width:600px;margin:0 auto;padding:10px;}
.tab_menu ul li{display:inline-block;width:60px;height:30px;line-height:30px;background:#eee;color:#000;text-align:center;}
.tab_menu ul li.selected{background:#999;}
.tab_box{height:400px;border:1px solid #d7d4e9;}
.tab_box .hide{display:none;}
</style>
</head>
<body>
<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected">时事</li>
<li>体育</li>
<li>娱乐</li>
</ul>
</div>
<div class="tab_box">
<div>时事</div>
<div class="hide">体育</div>
<div class="hide">娱乐</div>
</div>
</div>
</body>
</html>
