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上,据查阅资料,前者效率更好~~~




  • 相关阅读:
    牛客网暑期ACM多校训练营(第三场)2018 A,PACM Team ( 01背包裸题 )
    牛客网暑期ACM多校训练营(第三场)2018 C , Shuffle Cards ( rope )
    简单的计算几何
    数论基本定理
    HDU-1698 Just a Hook
    HDU-1754 I Hate It ( 线段树入门 + update操作 )
    Base64
    openssl生成RSA非对称密钥---Windows
    AES-对称加密
    DES-对称加密
  • 原文地址:https://www.cnblogs.com/mfrbuaa/p/4306761.html
Copyright © 2011-2022 走看看