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

实现当前页面对应的导航/菜单高亮显示的方法很多，通常都是给当前页面所对应的导航/菜单添加css样式来实现，简单的静态页面的网站，页面不多的情况下，可以直接在每个页面对应的导航/菜单上添加高亮样式即可。如果页面比较多，或者是没法手动添加辅助样式的话，就需要借助js来实现，下面简单介绍一种用js实现的方法。

导航/菜单HTML

<ul id="nav">
    <li><a href="index.html">主页</a></li>
    <li><a href="column.html">栏目</a></li>
</ul>

JS代码

;(function() {
    var links = document.querySelectorAll('#nav a'),
        path = document.location.pathname;
    for (var i = 0, item; item = links[i]; i++) {
        if (path.indexOf( item.getAttribute('href') ) === 1) {
            item.className = 'current';
            break;
        }
    }
})();

加入js代码以后，刷新页面，用开发者工具查看nav部分的DOM如下，这样在css中定义.current的样式以后，即可实现高亮显示。

<ul id="nav">
    <li><a href="index.html">主页</a></li>
    <li class="current"><a href="column.html">栏目</a></li>
</ul>

PS: 该方法也有相应的局限性，只适用于部分简单的应用场景。

推荐阅读：

如何让当前页面所对应的导航样式发生改变？

标签：网站建设