于jQuery+CSS制作的选项卡

现在看锋利的jquery....受益非浅....下面的这个..算是课堂笔记了...需要的同学可以拿了救急....

css部分

<style type="text/css">
.hide{display:none;}
ul{list-style:none;}
li{width:120px; float:left;}
.tab_box div{border:1px solid #A0A0A4; width:500px; /*text-align:ecnter;*/ height:100px; line-height:100px;}
.tab_menu{width:500px; height:20px;}
.tab_box{ margin:1px 0 0 0;}
.selected{padding:2px 2px 0 2px; background-color:#808080; border-bottom:1px solid #808080;}

/*border-bottom:1px solid #808080---这个很重要..兼容FF与IE8...如果不加这个FF会有1px的空白...*/
</style>

div 部分

<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>

jQuery部分

$(function(){
var $div_li=$("div.tab_menu ul li");

var $div =$("div.tab_box>div");
$div_li.click(function(){
$(this).addClass("selected").siblings().removeClass("selected");
var index=$div_li.index(this);
$div.eq(index).show().siblings().hide();
});
});