jquery 常用方法之选项卡tab

//"box_tit ul li"为标题,"ed"为标题选中样式,"ul.box li"为标题所对应的内容
$(function(){
$(".box_tit ul li").click(function(){
$(".box_tit ul li").siblings().removeClass("ed");
$(this).addClass("ed");
var index = $(".box_tit ul li").index($(this));
$("ul.box li").css("display","none");
$("ul.box li").eq(index).css("display","block");
return false;
});

});

<div class="box_tit">
<ul>
<li class="ed"><a href="#"><span>tit1</span></a></li>
<li><a href="#"><span>tit2</span></a></li>
<li><a href="#"><span>tit3</span></a></li>
<li><a href="#"><span>tit4</span></a></li>
</ul>
</div>

<ul class="box">
<li>content1</li>
<li>content2</li>
<li>content3</li>
<li>content4</li>
</ul>