jquery实现选项卡效果

1、html部分：

<ul class="tab">

<li class="tab_on">选项卡一</li>

<li>选项卡二</li>

<li>选项卡三</li>

</ul>

<ul class="content">

<li class="on">选项卡一内容选项卡一内容</li>

<li>选项卡二内容选项卡二内容</li>

<li>选项卡三内容选项卡三内容</li>

</ul>

2、jquery部分：

<script type="text/javascript">

$(document).ready(function(){

$(".tab li").click(function(){

$(".content li").eq($(".tab li").index(this)).addClass("on").siblings().removeClass('on'); 

});

});

</script>

3、效果如图：