Question

我在导航栏中有一个包含3个项目的网页;产品，合作伙伴和支持。我已将此导航栏移动到单独的.html文件中; navbar.html并使用load-navbar.js调用它。我这样做是为了避免代码重复。是否可以使用javascript来显示哪个导航栏项是活动的？是否可以使用switch语句来执行此操作。如果是，我该怎么做？

navbar.html

<nav class="navbar navbar-default mc-header navbar-static-top">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mc-collapse-nav">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="../index.html"><img id="logo" src="images/logo.svg" alt="Company Logo"></a>
    </div>
    <div id="mc-collapse-nav" class="collapse navbar-collapse mc-navbar-spacing">
        <ul class="nav navbar-nav navbar-right" >
            <li><a class="mc-active" href="Items/products.html">Products</a></li>
            <li><a href="partners.html">Partners</a></li>
            <li><a href="support.html">Support</a></li>
       </ul>
    </div>
</nav>

负载navbar.js

$(function(){
    $("#main-nav").load("main-nav.html");
});

产品中的mc-active类被添加到类中，以显示products.html是活动类。

Answer 1

您可以将当前网址存储在变量中：

var x = $(location).attr('href');

然后，如果href与url匹配，或者如果它的href包含在url中，则将“active”类分配给链接，以适合您的情况为准。您可以使用此链接：

css-tricks link

或此搜索：

jquery active link google

了解更多适合您情况的信息。我不认为你需要的不仅仅是窗口href和链接href之间的简单比较。另外，我肯定会遵循评论中给出的建议。

使用javascript管理导航栏

1 个答案: