导航跳转后保持选中状态 jquery高亮当前选中菜单

你的名字 2021-09-12 02:18 415阅读 0赞

**功能需求：**  
今天在写一个站点需要用到在导航菜单点击链接跳转到新页面后，高亮当前菜单样式。  
简单的说，就是我点击导航菜单中的一个栏目，跳转到该栏目下，该栏目菜单也同时高亮（可以是背景色也可以是背景图片）

**解决方法：**  
通过查看实例，我们需要用到JS中的jquery来实现这种效果，也可以通过CSS设置不同页面的a:hover实现效果，不过这显然是比较笨拙的方法。  
那么，如何用JS来实现效果呢,实现它所用的原理就是通过js中的location.href得到当前页面的地址，然后在与导航上的链接地址匹对，相同的就用一个css样式标记。此方法支持动态链接和静态链接多种形式。  
效果图：  
[![2][]][2 1]

**代码如下：**

<script type="text/javascript" src="jquery.min.js"></script>
    <style>
    .menu { padding:0; margin:0; list-style-type:none;}
    .menu li { background:#FFD1A4; margin-right:1px; float:left; color:#fff; }
    .menu li a { display:block; width:80px; text-align:center; height:32px; line-height:32px; color:#fff; font-size:13px; text-decoration:none;}
    
    .cur{ background:#D96C00; font-weight:bold;}
    </style>
    
    <ul class="menu" id="menu">
    <li><a href="a.html">首页</a></li>
    <li><a href="b.html">SEO优化</a></li>
    <li><a href="c.html">生活娱乐</a></li>
    </ul>
    
    <script type="text/javascript">
    var urlstr = location.href;
    //alert((urlstr + "/").indexOf($(this).attr("href")));
    var urlstatus=false;
    $("#menu a").each(function () {
    if ((urlstr + "/").indexOf($(this).attr("href")) > -1&&$(this).attr("href")!=”) {
    $(this).addClass("cur"); urlstatus = true;
    } else {
    $(this).removeClass("cur");
    }
    });
    if (!urlstatus) {$("#menu a").eq(0).addClass("cur"); }
    </script>

[2]: /images/20210813/cb0b96f7125e41b690798f5cb0538765.png
[2 1]: http://www.genban.org/imgups/allimg/160319/1G9315257-0.jpg

发表评论取消回复

表情：

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

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

相关阅读

相关 jq 实现切换菜单选中状态

点击导航菜单，切换选中状态效果： ![1149706-20190922212835682-1951559906.png][] ![1149706-20190922212

落日映苍穹つ/ 2023年08月17日 16:01/ 0 赞/ 121 阅读

相关 php js导航高亮显示,js实现当前导航菜单高亮显示

为了增加用户体验度，增加网页的易用性和美观度，往往需要把当前导航菜单以特殊方式显示，通常是高亮显示或有不同于其它菜单的背景，有两种方法可以实现，第一种是用纯css来实现，二是

短命女/ 2023年01月17日 08:25/ 0 赞/ 210 阅读

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

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

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

相关 CTreeCtrl失去焦点后高亮选中项

CTreeCtrl失去焦点后高亮选中项在VC++编程中，CTreeCtrl是使用最多的一种控件，由于MFC中包含了太多的宏，并且注释也不够仔细，这导致了我们在

以你之姓@/ 2022年08月13日 15:48/ 0 赞/ 303 阅读

相关 Jquery之导航选中记住状态

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

谁借莪１个温暖的怀抱￠/ 2022年07月12日 04:18/ 0 赞/ 173 阅读

相关 eclipse 设置选中高亮

高亮显示选中的变量对于程序员编程很有帮助，正常情况下Eclipse选中变量时都会高亮显示，可能软件冲突导致高亮显示失效，通过如下方法可以进行恢复。点击Windows-->P

淡淡的烟草味﹌/ 2022年05月27日 23:46/ 0 赞/ 227 阅读

相关实现radioButton选中后取消选中状态

function setDeSelectRadionButton(obj){ var radioCheck= $(obj).val();

痛定思痛。/ 2022年05月23日 22:12/ 0 赞/ 347 阅读

相关 html 通用导航 a链接跳转时给当前导航添加选中颜色

学习前端的同学或许会遇到这个问题做一个基本的小站有几个导航的,如下图 ![1133093-20190214151418177-1712041860.png][] 无论有

超、凢脫俗/ 2021年12月15日 00:34/ 0 赞/ 336 阅读

相关 python变量选中后高亮显示

file>settings>editor>color scheme>general>code>identifier under caret>background 转载于:ht

分手后的思念是犯贱/ 2021年11月05日 03:02/ 0 赞/ 410 阅读

相关导航跳转后保持选中状态 jquery高亮当前选中菜单

功能需求：今天在写一个站点需要用到在导航菜单点击链接跳转到新页面后，高亮当前菜单样式。简单的说，就是我点击导航菜单中的一个栏目，跳转到该栏目下，该栏目菜单也同时高亮

你的名字/ 2021年09月12日 02:18/ 0 赞/ 416 阅读