jquery 简单的栏目切换

<style>
ul{ list-style:none; padding:0px; margin:0px;}
#nav_box{ width:502px; height:402px; overflow:hidden;}
#nav_box ul.nav_tit{ width:500px; height:30px; list-style:none;}
#nav_box ul.nav_tit li{ width:60px; float:left; margin-right:5px; background:url(img/1.jpg) no-repeat; height:30px; line-height:25px;cursor: pointer;}
#nav_box ul.nav_tit li.on{ cursor: pointer; background-color:#FF6600; color:#FFFFFF}
#nav_box .nav_con{ width:500px; height:370px; border:1px #CCCCCC solid;}

</style>

 

<div id="nav_box">
<ul class="nav_tit"><li class="on">栏目1</li><li>栏目2</li><li>栏目3</li></ul>
<div class="nav_con">
<ul>
<li style="display:block">111</li>
<li style="display:none">222</li>
<li style="display:none">333</li>
</ul>
</div>
</div>

<script type="text/javascript">
$(document).ready(function(){
 $(".nav_tit li").click(function(){
 index=$(".nav_tit li").index(this);
 $(".nav_tit li").removeClass("on").eq(index).addClass("on");
 $(".nav_con li").attr("style","display:none");
 $(".nav_con li").eq(index).attr("style","display:block");
 });


});
</script>

removeClass 移除全所.nav_tit li 下的on   再用eq(index)定位到当前选项，接着添加on