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

转载于:https://www.cnblogs.com/vania/p/3316707.html

相关资源：jQuery栏目切换