最受欢迎

使用 jQuery 在导航栏中设置活动类，即使它不是子链接

set active class in navbar with jquery even its not child link

本文关键字：链接 导航 jQuery 活动 设置 使用 | 更新日期: 2023-09-27

这是我来自单一产品的html代码.html

<nav class="main-navi">
    <ul>
        <li>
            <a href="index.html">
                Home
                <span class="dot"></span>
                <span class="corner"></span>
            </a>
        </li>
        <li>
            <a href="portfolio.html">
                Portfolio
                <span class="dot"></span>
                <span class="corner"></span>
            </a>
        </li>
        <li>
            <a href="about.html">
                About
                <span class="dot"></span>
                <span class="corner"></span>
            </a>
        </li>
        <li>
            <a href="service.html">
                services
                <span class="dot"></span>
                <span class="corner"></span>
            </a>
        </li>
        <li>
            <a href="blog.html">
                Blog
                <span class="dot"></span>
                <span class="corner"></span>
            </a>
        </li>
        <li>
            <a href="contact.html">
                contacts
                <span class="dot"></span>
                <span class="corner"></span>
            </a>
        </li>
    </ul>
    <em id="showHideMenu" class="show-hide-menu fa fa-bars" href="#"></em>
</nav>

<p>lorem ipsum bla bla bla bla bla bla blabla </p>

所以我的问题：正如您在导航栏中看到的，我没有在导航栏中放置单作品集 1、单作品集 2 和单作品集 3。 所以我希望当我加载单个投资组合 1 或 2 或 3 时，我希望在导航栏中的投资组合链接获得类 ACITVE。我怎样才能用jquery做到这一点？我可以使用特定方法进行设置，例如包含（"单一投资组合"）。

因此，有几种不同的方法可以解决这个问题。 首先，您可以创建一个希望在其上显示活动类的页面数组，然后如果window.location.pathname在此数组中，则可以像这样触发活动类：

var pageArray = ["/single-portfolio-1.html", "/single-portfolio-2.html", "/single-portfolio-3.html"];
var loc = window.location.pathname;
if ($.inArray(loc, pageArray) >  -1){
     $('.main-navi ul li a[href="portfolio.html"]').addClass("active");
}

请记住，这将查找页面的路径名，因此如果您的 url example.com/single-portfolio-1.html 它将返回/single-portfolio-1.html如果它是 example.com/pages/single-portfolio-1.html 它将返回/pages/single-portfolio-1.html 因此请在数组中相应地调整它

或者，

您可以找到具有这些页面独有的类的内容，或者为这些页面上的正文提供一个类，然后在单个投资组合页面上的元素hasClass()如下时触发您的活动类：

if($('body').hasClass("portfolio-page")){
    $('.main-navi ul li a[href="portfolio.html"]').addClass("active");
}

如果你有一个元素是你的单个投资组合页面独有的，你可以使用它来替换if语句来包含唯一元素。

或者您可以在这些页面上放置一个脚本来更改活动类，如下所示： 

$( document ).ready(function() {
    $('.main-navi ul li a[href="portfolio.html"]').addClass("active");
});

希望这有帮助

相关文章：