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




  • 相关阅读:
    挑战编程 uva100 3n+1
    《算法问题实战策略》 BOGGLE
    图论 最短路专辑
    acwing 76. 和为S的连续正数序列
    leetcode 19 删除链表的倒数第N个节点
    水文一篇 汇报下最*的学**况
    acwing 81. 扑克牌的顺子
    Solr基础理论与维护管理快速上手(含查询参数说明)
    Solr基础理论与维护管理快速上手(含查询参数说明)
    利用SolrJ操作solr API完成index操作
  • 原文地址:https://www.cnblogs.com/mfrbuaa/p/4306761.html
Copyright © 2011-2022 走看看