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

最新推荐文章于 2022-03-30 20:36:55 发布

RightHereWaitingFY

最新推荐文章于 2022-03-30 20:36:55 发布

阅读量466

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/luyundesign/article/details/103496170

jQuery 专栏收录该内容

10 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

RightHereWaitingFY

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

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

10-19

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

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

10-18

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

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

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

weixin_30414635的博客

11-16

431

后台的同事因为把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

821

<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

190

如图所示：点击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

1118

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

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

10-27

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

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

09-01

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

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

03-07

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

导航菜单点击切换时保持高亮状态（JS实现）示例代码navtab11.html

02-25

导航菜单点击切换时保持高亮状态（JS实现）示例代码。尝试每个页面的导航栏目后加class=“active”属性进行修改不成功，这时就需要灵活使用javascript来搞定，主要用到添加类样式addClass()，删除类样式removeClass()，切换类样式toggleClass()等。

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

一个甜甜的大橙子的博客

03-30

3877

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

为当前导航添加active样式

weixin_30825199的博客

05-26

440

判断当前页面为哪个导航链接 if(window.loacation.href.indexOf(linkurl) != -1){ 　　link[i].className = 'active' } 转载于:https://www.cnblogs.com/cnundefined/p/6906899.html

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

自强不息

11-13

303

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

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

qq_25543685的博客

04-10

821

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

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