如果url等于链接的href，则添加一个类

Question

我正在尝试在WordPress中制作一个jQuery脚本，该脚本会将“ active”类添加到我的侧边栏元素中，该元素的URL与导航栏中的匹配链接相同。

 (function ($) { var url = window.location.href; $('.navbar-nav li').each(function ($) { if ($('.navbar-nav li a').attr('href') == url) { $('.navbar-nav li').addClass('active'); } }); console.log(url); })(jQuery); 

 .active { background-color: black;} } 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-white"> <div class="collapse navbar-collapse" id="navbarTogglerDemo01"> <ul class="nav navbar-nav"> <li class="nav-item menu_accueil only-mobile"> <a class="nav-link" href="<?php echo get_site_url() ?>/"> Accueil </a> </li> <li class="nav-item menu_marque"> <a class="nav-link" href="<?php echo get_site_url() ?>/la-marque-honey"> La marque </a> </li> <li class="nav-item menu_formule"> <a class="nav-link" href="<?php echo get_site_url().'/la-formule-honey' ?>"> La formule </a> </li> <li class="nav-item menu_bebe"> <a class="nav-link" href="<?php echo get_site_url() ?>/conseil"> Le monde de bébé </a> </li> </ul> </div> </nav> 

它显示了一个错误（$不是函数），而网站上还有另一段代码可以与相同的选择器一起很好地工作。

这是什么问题？ 谢谢

Answer 1

它显示一个错误（$不是函数）

发生此错误的原因是，您要在每个元素中重新定义$作为要迭代的元素：

 $('.navbar-nav li').each(function ($) {
 // Dont do this -------------------^

您的代码有些错误，但是总的来说，您正在做的是在整个页面中使用选择器，而不是使用each元素枚举当前元素的选择器

 $(function() { var url = window.location.href; $('.navbar-nav li').each(function() { if ($('a',this).attr('href') == url) { $(this).addClass('active'); } }); console.log(url); }); 

 .active { background-color: black; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /> <nav class="navbar fixed-top "> <div class="" id="navbarTogglerDemo01"> <ul class="nav navbar-nav"> <li class="nav-item menu_accueil only-mobile"> <a class="nav-link" href="xxx"> Accueil </a> </li> <li class="nav-item menu_marque"> <a class="nav-link" href="xxx"> La marque </a> </li> <li class="nav-item menu_formule"> <a class="nav-link" href="https://stacksnippets.net/js"> La formule </a> </li> <li class="nav-item menu_bebe"> <a class="nav-link" href="xxx"> Le monde de bébé </a> </li> </ul> </div> </nav> 

Answer 2

您需要确保在调用函数之前已加载jquery脚本。 只要确保jquery脚本标记在包含您的代码的脚本标记之前即可。

除了最初的错误之外，您在这里拥有的将为.navbar-nav每个li添加.active 。

$('.navbar-nav li').each(function ($) {//So is $ in the function parenthisis
    if ($('.navbar-nav li a').attr('href') == url) {
        $('.navbar-nav li').addClass('active');//this is wrong
    }
});

您应该使用this关键字。 就像是

$('.navbar-nav li').each(function () {
    let anchor = $(this).children('a');
    if ($(anchor).attr('href') == url) {
        $(this).addClass('active');
    }
});

Answer 3

尝试这个：

jQuery( document ).ready(function() {
    var url = window.location.href;
    $('.navbar-nav li').each(function ($) {
        if ($('.navbar-nav li a').attr('href') == url) {
            $('.navbar-nav li').addClass('active');
        }
    });
    console.log(url);
});