Question

我在使用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));
}

抱歉我的英语不好。

Answer 1

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

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

setPage函数中有2个问题：

if (hrefString = document.location.href)

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

其次是在{if}语句之前没有定义hrefString（至少在你提供的代码中没有定义），所以javascript会抛出错误并停止执行。

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

1 个答案: