菜单高亮显示 · 全书

# 菜单高亮显示我们在实际项目中，经常使用到“菜单高亮”这个功能，这个看似简单的功能，却难倒了绝大多数的前端，有的人用前端实现，有的人用后端实现，甚至有时候用很多方法都不奏效！ > 我认为：用jquery下面的这种方法，我认为是最好的！ ## 一、原理 1、在菜单层的链接加上一个 `rel` 属性,保存 `href` 属性即可， 2、然后利用浏览器地址栏中的 `URL` 和 `rel` 对比， 3、如果相等就在当前的 `<a>`标签加上 `class` ,同时移除其它 `<a>` 标签的 `class`。 ## 二、代码段 ``` <script type="text/javascript"> var urlstr = location.href;　　　　 //获取浏览器的url var urlstatus = false;　　　　　　　//标记 //遍历导航div $(".dropdown a").each(function() { //判断导航里面的rel和url地址是否相等 if((urlstr + '/').indexOf($(this).attr('rel')) > -1 && $(this).attr('rel') != '') { $(this).addClass('cur'); urlstatus = true; } else { $(this).removeClass('cur'); } }); //当前样式保持 if(!urlstatus) { $(".dropdown a").eq(0).addClass('cur'); } </script> ``` ## 三、示例具体代码，如图所示： ![](image/57c926a9d2b59.png) 1、index.html 和 index_b.html 的代码相同，如下： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css" /> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="script.js"></script> <style> .cur{background: #EF9B11;color:#FF0000;} </style> </head> <body> <ul> <li class="dropdown"> <a id="a" href="index.html" class="dropbtn" onclick="showList(this)" rel="index.html">标题 A</a> <div class="dropdown-content" id="dropdown-a"> <a href="#">下拉 1</a> <a href="#">下拉 2</a> <a href="#">下拉 3</a> </div> </li> <li class="dropdown"> <a id="b" href="index_b.html" class="dropbtn" onclick="showList(this)" rel="index_b.html">标题 B</a> <div class="dropdown-content" id="dropdown-b"> <a href="#">下拉 1</a> <a href="#">下拉 2</a> <a href="#">下拉 3</a> </div> </li> </ul> <script type="text/javascript"> var urlstr = location.href;　　　　 //获取浏览器的url var urlstatus = false;　　　　　　　 //标记 //遍历导航div $(".dropdown a").each(function() { //判断导航里面的rel和url地址是否相等 if((urlstr + '/').indexOf($(this).attr('rel')) > -1 && $(this).attr('rel') != '') { $(this).addClass('cur'); urlstatus = true; } else { $(this).removeClass('cur'); } }); //当前样式保持 if(!urlstatus) { $(".dropdown a").eq(0).addClass('cur'); } </script> </body> </html> ``` 2、css代码 ``` body { font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover, .dropdown:hover .dropbtn { background-color: #1f75cf; } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #fafafa; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { color: white; background-color: #1f75cf; } .show { display: block; } ``` 3、JS代码 ``` function showList(o) { hideList("dropdown-content" + o.id); document.getElementById("dropdown-" + o.id).classList.toggle("show"); } function hideList(option) { var dropdowns = document.getElementsByClassName("dropdown-content"); for (var i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.id != option) { if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } window.onclick = function(e) { if (!e.target.matches('.dropbtn')) { hideList(""); } } ```