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、效果如图:

