1. 百科知识问答首页
  2. 经验知识

Js实现当前导航菜单高亮显示

柚子 • • 经验知识 • 阅读 20

HTML结构

  1. <div id=“navmenu”>
  2.  <ul id=“nav”>
  3.  <li><a href=“index.html”>主页</a></li>
  4.  <li><a href=“column.html”>栏目</a></li>
  5.  <li><a href=“zch.html”>栏目</a></li>
  6.  </ul>
  7. </div>

JS代码

  1. <script type=“text/javascript” language=“javascript”>
  2. var nav = document.getElementById(“nav”);
  3. var links = nav.getElementsByTagName(“li”);
  4. var lilen = nav.getElementsByTagName(“a”);
  5. var currenturl = document.location.href;
  6. var last = 0;
  7. for (var i=0;i<links.length;i++)
  8. {
  9. var linkurl = lilen[i].getAttribute(“href”);
  10. if(currenturl.indexOf(linkurl)!=-1)
  11. {
  12. last = i;
  13. }
  14. }
  15. links[last].className = “current”;
  16. </script>

注意事项：

该方法通过对比当前页面的URL和菜单的URL来判定该高亮显示哪个菜单。使用也很简单，只需要在页面的</body>标签前添加下面这段JS即可，注意这段代码需要加到菜单的源代码之后，否则不能生效。

测试的时候要多见几个页面，像这样：

本作品（图文、音视频）由用户自行上传分享，仅供网友学习交流。若您的权利被侵害，请联系 yu.jianchun@qq.com

赞 (0)
柚子柚子推荐达人
0
« 上一篇 2022-07-04 11:32
下一篇 » 2022-07-04 15:56

相关推荐