给导航栏添加停留样式

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

实例:

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




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值