jQuery 根据当前地址，添加active样式

最新推荐文章于 2020-08-18 21:21:04 发布

原创最新推荐文章于 2020-08-18 21:21:04 发布 · 478 阅读

0 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的导航菜单高亮效果的方法。当用户点击或进入页面的某个部分时，相应的导航菜单项会自动添加高亮显示，以增强用户体验。此技术适用于网站的侧边栏或顶部菜单。


$('li a.firstMenu').each(function(){
    if(this.href == window.location.href){
        $(this).parent().addClass('active');
    }
})

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

RightHereWaitingFY

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【jQuery】导航栏动态添加active的两种方式

一个甜甜的大橙子的博客

03-30

3914

导航栏动态添加active的两种思路和代码实现

Bootstrap导航菜单点击后无法自动添加active的处理方法

10-18

总结来说，解决Bootstrap导航菜单点击后无法自动添加“active”类的问题的关键在于，通过编写适当的JavaScript代码，动态地根据当前页面的URL地址来判断并更新导航菜单项的激活状态。这种方法简单有效，但需要注意，...

参与评论您还未登录，请先登录后发表或查看评论

jquery 根据网站url给导航nav添加active效果

weixin_30414635的博客

11-16

447

后台的同事因为把nav公用了，所以无法单页添加active，一下方法通过判断url的后缀给当前页添加active $(function(){ var _nava= $('.nav .nav-wrapper a'); var _url = window.location.href; var _host = window.location.host; for(var i...

jq 根据url判断添加样式

123456

01-21

836

<div class="bk-more"> <a href="/open/course/explore" class="btn btn-default">全部</a> <a href="/open/course/explore/yijian" class="btn btn-d

jQuery动态添加.active属性实现按钮点击样式

陌生谁家年少

07-29

4万+

想实现如图效果，设置好了按钮的不同状态样式，想在点击某个按钮后保存.active的样式，其他的恢复默认样式：代码：选中按钮样式普通按钮样式普通按钮样式普通按钮样式 jQuery效果实现代码： $(".menu_list a").click(function(){ $(".menu_list a").removeClass("acti

jquery地址栏链接与a标签链接匹配添加样式！

weixin_30602505的博客

03-08

200

如图所示：点击HTML+css3跳转后，给其添加如图样式： 1 2 3 4 5 6 7 8 9 10 var currUrl = window.location.href; var currStyle = function (links){ links.each(function(){ var ur...

jquery实现页面导航列表点击添加active样式

weixin_30567225的博客

06-20

1132

h5代码： jquery代码转载于:https://www.cnblogs.com/Emily-m/p/11058244.html

jQuery动态添加.active 实现导航效果代码思路详解

10-19

在本文中，我们将详细探讨如何使用jQuery动态地为导航菜单项添加一个“.active”类名，以便实现一种常见的用户界面效果，即突出显示当前页面所对应的导航项。这种方法在网站设计中十分常见，它可以帮助用户理解他们...

Jquery显示、隐藏元素以及添加删除样式

10-27

该命令的作用是当`li`元素中包含`span`元素，并且其值为空时，就从`li`元素中移除`active`类，这可能会改变`li`元素的样式，因为CSS样式通常是根据类名来定义的。这些操作中涉及到的Jquery方法还有`.is()`和`....

jquery bootstrap自定义添加删除选项卡代码

09-01

在本文中，我们将深入探讨如何使用jQuery和Bootstrap框架来实现自定义的添加和删除选项卡功能。Bootstrap是一款流行的前端开发工具，它提供了丰富的组件和样式，使得构建响应式和交互式的用户界面变得简单。而jQuery...

jquery怎么实现页面刷新后保留鼠标点击addclass的样式

qq_25543685的博客

04-10

832

感谢所以回答问题的人。比较好的办法是使用url传参数，然后根据参数判断是否有必要显示class但是更好的办法是下面这段JS[javascript] view plain copy<span style="font-size:18px;">$('ul.main-menu li a').each(function(){ if($($(this))[0].href==String...

bootstrap导航菜单做active判断

weixin_30855099的博客

01-21

1251

先创建2个文件，index 和about，导入bootstrap的css <div class="container"> <ul class="nav nav-pills"> <li><a href="index.html">Home</a></li> ...

根据location地址，在导航栏高亮显示当前页面

weixin_30577801的博客

12-24

502

获取当前页面的地址栏。与导航栏中所有<a>标签的href属性进行比较。如果相等则高亮显示此<a>标签。注意点：a标签的href属性在浏览器解析时是绝对路径。　　　　a标签的href如果是锚点，则pathname ， href都与location的pathname ，href相等，但hash属性会存储锚点，所以还需判断是否是锚点。代码： ...

CheckStyle报错的常见问题及解决方式

热门推荐

10-19

5万+

CheckStyle报错的常见问题及解决方式

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

自强不息

11-13

318

当鼠标选中页面导航栏的某一栏目后，如何给选中栏目添加特殊样式，一直没怎么搞清楚，今天学习了一下，并做个总结。这边有两种情况，一种是直接给当前页面添加特殊样式，当网页刷新或者跳转到下一页后，样式消失；另一种情况是即使刷新页面后样式仍然有效。直接上代码：第一种情况： <script type="text/javascript" src="templets/js/jquery.js"...

通过JS改变CSS样式的方法和对window对象的初步认识

qq_45644916的博客

08-18

428

通过JS操作CSS CSS的优先级 Style > ID选择器 > 类选择器 >标签选择器 1.通过style属性来修改css DOM Style对象 .style.CSS属性=“值” 注意：在JavaScript中CSS属性的写法和CSS中的属性写法不一样 CSS中多个单词使用 - 隔开 JavaScript中，使用驼峰命名法 font-size fontSize margin-top marginTop background-color ba

jquery给当前点击菜单项添加样式

03-07

可以使用以下代码给当前点击的菜单项添加样式： ``` $(function(){ $('ul li').click(function(){ $('li').removeClass('active'); $(this).addClass('active'); }); }); ``` 其中，'active'是你想要添加的样式类名，可以根据自己的需求进行修改。