zoukankan      html  css  js  c++  java
  • jquery 简单的栏目切换

    <style>
    ul{ list-style:none; padding:0px; margin:0px;}
    #nav_box{ 502px; height:402px; overflow:hidden;}
    #nav_box ul.nav_tit{ 500px; height:30px; list-style:none;}
    #nav_box ul.nav_tit li{ 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{ 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

  • 相关阅读:
    C#中HashTable的用法
    JS、C#编码解码
    javascipt取整数四舍五入
    Oracle中的不等于号
    MD5加密函数
    汉字转成拼音
    按日期生成惟一的编号
    将access数据转换成oracle数据
    TOAD Menu Shortcuts 快捷键
    请求方法总结
  • 原文地址:https://www.cnblogs.com/vania/p/3316707.html
Copyright © 2011-2022 走看看