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

上一篇:8 -- 深入使用Spring -- 4...6 AOP代理:基于注解的XML配置文件的管理方式


下一篇:如何在 NetCore 中定义我们自己的JSON配置文件的管理器。