使用 Javascript 突出显示当前页面链接

Highlight current page link using Javascript

本文关键字：当前页 链接 显示 Javascript 使用      更新时间：2023-09-26

我在使用 Javascript 突出显示侧边栏中的活动菜单项时遇到问题。所以我在 中调用 setPage（） 以突出显示当前菜单项，但没有任何反应。有什么想法可以解决吗？

顺便说一句，这是我的代码：

.HTML：

<nav class="sidebar-nav">
    <a class="sidebar-nav-item" href="nav.html">Main page </a>
    <a class="sidebar-nav-item" href="page2.html">Dummy page 2</a>
    <a class="sidebar-nav-item" href="page3.html">Dummy page 3</a>
    <a class="sidebar-nav-item" href="page4.html">Dummy page 4</a>
    <script language="text/javascript">setPage()</script>
</nav>

.CSS：

* {
    margin:0;
    padding:0;
}
body {
    background:#CCC;
    font:140% "Times New Roman", Times, serif, Arial;
    line-height:1.5;
    font-weight:bold;
}
.sidebar-nav {
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.sidebar-nav-item {
    display: block;
    padding: .5rem 1rem;
    border-top: 1px solid rgba(255,255,255,.1);
}
.sidebar-nav-item.active,
a.sidebar-nav-item:hover,
a.sidebar-nav-item:focus {
    text-decoration: none;
    background-color: rgba(255,255,255,.1);
    border-color: transparent;
}

Javascript：

function extractPageName(hrefString) { // This function is 
    var arr = hrefString.split('/');
    return (arr.length < 2) ? hrefString : arr[arr.length - 2].toLowerCase() + arr[arr.length - 1].toLowerCase();
}
function setActiveMenu(arr, crtPage) {
    for (var i = 0; i < arr.length; i++) {
        if (extractPageName(arr[i].href) == crtPage) {
            arr[i].className = "sidebar-nav-item active";
        }
    }
}
function setPage() {
    if (hrefString = document.location.href)
        hrefString = document.location.href;
    else
        hrefString = document.location;
    if (document.getElementsByClassName("sidebar-nav") != null)
        setActiveMenu(document.getElementsByClassName("sidebar-nav-item"), extractPageName(hrefString));
}

对不起，我的英语不好。

这不是language，而是type，这是你的第一个错误（虽然它可能有效，但根据标准它是不正确的。

要设置链接活动状态，请获取相应的anchor（<a>）元素并向其添加类active。这应该可以工作，因为您已经为活动链接定义了样式，我认为这应该像现在一样工作。

您在setPage功能中有 2 个问题：

if (hrefString = document.location.href)

=符号表示值的分配，使用==或===进行比较。我真的推荐===，因为它从字面上比较 2 个对象，而不是仅比较值，就像==比较一样。

其次，hrefString 在此 if 语句之前没有定义（至少没有在您提供的代码中定义），因此 javascript 将抛出错误并停止执行。

相关文章：