jquery 简单的栏目切换

时间：2020-12-29 14:40:58
<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

相关文章