网站导航栏目焦点设置

最新推荐文章于 2025-05-09 19:50:03 发布

转载最新推荐文章于 2025-05-09 19:50:03 发布 · 184 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/newlangwen/p/7832873.html

本文介绍了一种简单的方法来实现在网站导航栏中根据当前访问页面自动高亮相应链接的效果。通过匹配当前URL路径与导航链接，可以轻松地突出显示当前活动的页面。

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

原文地址：http://www.w3dev.cn/article/20130411/website-nav-focus-item.aspx

一般访问网站时，访问到不同的栏目，导航上的链接会高亮，显示的样式和其他栏目不一样，这种效果实现很简单，原理如下
获取当前的url路径location.pathname，然后和导航中的链接匹配，匹配了就设置焦点样式。如果栏目不是页面，而是通过传递参数来实现，可以location.search中获取栏目参数来匹配。
下面是一个就简单的示例，建立1.html,2.html,3.html,4.html文件，内容全部为下面贴出的html代码，

<div id="dvGuider">
<a href="1.html">1.html</a>
<a href="2.html">2.html</a>
<a href="3.html">3.html</a>
<a href="4.html">4.html</a>
</div>
<style>
a.focus{background:#ff0000;color:#ffffff;}
</style>
<script>
    var pn = location.pathname;
    var as = document.getElementById('dvGuider').getElementsByTagName('a'),find=false;
    for (var i = 0, j = as.length; i < j; i++)
        if (as[i].href.indexOf(pn) != -1) { as[i].className = 'focus'; find = true; break; }
    //if (!find) as[0].className = 'focus';//如果未找到匹配的，需要设置哪个获取焦点可以修改这句
</script>

转载于:https://www.cnblogs.com/newlangwen/p/7832873.html