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脚本标签在包含您的代码的脚本标签之前即可。

除了您最初遇到的错误外，这里的内容还会为每个.active的{{1}}添加li。

.navbar-nav

您应该使用$('.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

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);
});

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

3 个答案: