菜單高亮顯示 · 全書

# 菜單高亮顯示我們在實際項目中，經常使用到“菜單高亮”這個功能，這個看似簡單的功能，卻難倒了絕大多數的前端，有的人用前端實現，有的人用后端實現，甚至有時候用很多方法都不奏效！ > 我認為：用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(""); } } ```