tab选项卡

1. CSS部分：

* {
margin: 0;
padding: 0;
}

body {
font: 12px/19px Arial, Helvetica, sans-serif;
color: #666;
}

.tab {
width: 600px;
margin: 50px;
}

.tab_menu {
clear: both;
}

.tab_menu li {
float: left;
text-align: center;
cursor: pointer;
list-style: none;
padding: 1px 6px;
margin-right: 4px;
background: #F1F1F1;
border: 1px solid #898989;
border-bottom: none;
}

.tab_menu li.hover {
background: #DFDFDF;
}

.tab_menu li.selected {
color: #FFF;
background: #6D84B4;
}

.tab_box {
clear: both;
border: 1px solid #898989;
height: 100px;
}

.hide {
display: none;
}

.content {
padding: 5px 5px;
}
</style>

2. JS部分

<script src="jquery-1.7.1.min.js"></script>

<script type="text/javascript">
//<![CDATA[
$(function () {
var $div_li = $("div.tab_menu ul li");
$div_li.click(function () {
$(this).addClass("selected").siblings().removeClass("selected"); //当前<li>元素高亮
//去掉其它同辈<li>元素的高亮

var key = $div_li.index(this); // 获取当前点击的<li>元素 在 全部li元素中的索引。
$("div.tab_box > .tab_box_con").eq(key).show().siblings().hide(); //选取子节点。不选取子节点的话，会引起错误。如果里面还有div
//显示 <li>元素对应的<div>元素
//隐藏其它几个同辈的<div>元素
})
})
//]]>
</script>

3. HTML部分

<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected">主页</li>
<li>爱好</li>
<li>娱乐</li>
<li>时事</li>
<li>体育</li>
<li>文章</li>
</ul>
</div>
<div class="tab_box">
<div class="tab_box_con">
<div class="content">主页</div>
</div>
<div class="tab_box_con hide">
<div class="content">爱好</div>
</div>
<div class="tab_box_con hide">
<div class="content">娱乐</div>
</div>
<div class="tab_box_con hide">
<div class="content">时事</div>
</div>
<div class="tab_box_con hide">
<div class="content">体育</div>
</div>
<div class="tab_box_con hide">
<div class="content">娱乐</div>
</div>
</div>
</div>