给导航栏加入停留样式

一时失言乱红尘 2022-03-31 13:46 216阅读 0赞

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

实例：

HTML代码：

<div class="side_layout">
          
          <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上，据查阅资料，前者效率更好~~~

发表评论取消回复

表情：

评论列表（有 0 条评论，216人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序 - 点击导航栏标签切换变色（导航栏当前hover样式）

效果图 ![在这里插入图片描述][202008171850293.gif_pic_left] 实现这个功能，借助一个切换标识，当与各标签项 `index` 对应

迈不过友情╰/ 2022年11月28日 13:24/ 0 赞/ 430 阅读

相关 Vue - 点击导航栏当前标签后变色功能（导航栏当前hover样式）

效果图 ![在这里插入图片描述][20200817173617973.gif_pic_left] 实现这个功能，借助一个切换标识，当与各标签项 `index`

心已赠人/ 2022年11月28日 13:19/ 0 赞/ 538 阅读

相关给当前页或者跳转后页面的导航栏添加选中样式

用Jquery(js)给当前页或者跳转后页面的导航栏添加选中当鼠标选中页面导航栏的某一栏目后，如何给选中栏目添加特殊样式，一直没怎么搞清楚，今天学习了一下，并做个总结。

￡神魔★判官ぃ/ 2022年09月24日 10:25/ 0 赞/ 173 阅读

相关基于boostrap icon 动态显示导航栏样式

![Center][] \--------------------------------------------------------------------------

本是古典何须时尚/ 2022年07月10日 04:23/ 0 赞/ 178 阅读

相关 bootstrap完整左侧导航栏代码及结果样式

如下是我写的基于bootstrap的左侧导航栏，代码如下：此demo所需的js和css插件链接[点击打开链接][Link 1] 1、left.html <!--左侧核心

深藏阁楼爱情的钟/ 2022年05月29日 21:06/ 0 赞/ 245 阅读

相关状态栏导航栏和 action bar的样式设定

透明状态栏透明状态栏一般用在有背景图片的页面中。 [![S1.png_raw_true][]][S1.png_raw_true 1] 这种情况我们可能希望顶部的状态

逃离我推掉我的手/ 2022年05月28日 08:14/ 0 赞/ 247 阅读

相关导航栏

想必大家在百度上见过许多导航栏的代码，下面我来为大家安利三种比较实用的导航栏（仅靠html/css来实现）： 1 下拉菜单栏： <!DOCTYPE html>

深藏阁楼爱情的钟/ 2022年05月25日 10:58/ 0 赞/ 405 阅读

相关 js 实现导航栏滑动透明渐变样式

学习记录，欢迎各位参考，有更好的方案也可以一起讨论！下面直接贴代码，可以直接复制到自己的编辑器运行 <!DOCTYPE html> <html>

怼烎@/ 2022年05月08日 06:20/ 0 赞/ 375 阅读

相关给导航栏加入停留样式

浅谈下给类似导航栏的东东，加入停留样式的三种方法：实例： HTML代码： <div class="side_layout"> <!--Sid

一时失言乱红尘/ 2022年03月31日 13:46/ 0 赞/ 217 阅读

相关导航栏

今天做一个百度首页的导航栏 ![在这里插入图片描述][20190716200535505.png] <!DOCTYPE html> <html>

「爱情、让人受尽委屈。」/ 2021年12月07日 11:55/ 0 赞/ 521 阅读