zoukankan      html  css  js  c++  java
  • 给导航栏加入停留样式

    浅谈下给类似导航栏的东东,加入停留样式的三种方法:

    实例:

    HTML代码:

     <div class="side_layout">
          <!--Sidebar content-->
          <div class="list-group">
          	<a href="#" class="list-group-item active">项目1 <span class="glyphicon_right_img glyphicon glyphicon-chevron-right"></span></a>
            <a href="#" class="list-group-item">项目2 <span class="glyphicon_right_img glyphicon glyphicon-chevron-right"></span></a>
            <a href="#" class="list-group-item">项目3 <span class="glyphicon_right_img glyphicon glyphicon-chevron-right"></span></a>
            <a href="#" class="list-group-item">项目4 <span class="glyphicon_right_img glyphicon glyphicon-chevron-right"></span></a>
            <a href="#" class="list-group-item">项目5 <span class="glyphicon_right_img glyphicon glyphicon-chevron-right"></span></a>
            <a href="#" class="list-group-item">项目6 <span class="glyphicon_right_img glyphicon glyphicon-chevron-right"></span></a>
          </div>
        </div>
    js代码:

    方法一:

    $(function(){
    	$(".side_layout a").click(function(){
    	$(this).addClass('active');
    			$(this).siblings().removeClass('active');
    	});	   
    });
    方法二:
    $(document).on("click", ".side_layout a", function(){
    	$(this).addClass('active')
    			.siblings().removeClass('active');
    });
    方法三:
    $(function(){
    $(".side_layout a").bind('click',function(){
    	$(this).addClass('active');
    			$(this).siblings().removeClass('active');
    	});	 
    		   });
    个人觉得方法二最方便。

    方法一和三都须要包括在$(function()内部

    方法二、三都是给元素绑定一个单击事件,差别在于$(document).on的方法是把绑定托付到了文档上,二bind方法是托付到了.side_layout a上,据查阅资料,前者效率更好~~~




  • 相关阅读:
    List remove注意点
    枚举类比较的陷阱
    【好书推荐】《剑指Offer》之硬技能(编程题7~11)
    【好书推荐】《剑指Offer》之硬技能(编程题1~6)
    【好书推荐】《剑指Offer》之软技能
    在互联网中关系型数据库是否不再那么重要
    常用开发环境搭建配置教程(OneStall)
    让Mongo在Spring中跑起来
    MongoDB初了解——用户权限
    毕业这两年
  • 原文地址:https://www.cnblogs.com/mfrbuaa/p/4306761.html
Copyright © 2011-2022 走看看