JQuery 3.3.1 --- 将类添加到 <a>答案

【问题标题】：JQuery 3.3.1 --- addClass to <a>JQuery 3.3.1 --- 将类添加到 <a>
【发布时间】：2019-04-19 05:07:43
【问题描述】：

我是 JQuery 的新手，正在尝试将“活动”标签添加到引导类。如果我的 .js 文件中的语法有问题，谁能告诉我。

这是我的 base.js 文件：

$(document).ready(function(){
    $("#navlinks li a").on(click, function(){
        $(this).addClass('active').siblings().removeClass('active');
    })
});

这是我正在使用的 html 页面（使用 django）：

  <div class="collapse navbar-collapse">
    <ul class="navbar-nav mr-auto" id="navlinks">
      <li class="nav-item">
        <a class="nav-link" href="{% url 'home' %}"><i class="fas fa-home"></i> Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{% url 'contact'%}"><i class="far fa-envelope"></i> Contact</a>
      </li>
    </ul>

以防我没有正确排序我的 .js 文件，这是我的 html 页面的底部：

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- Custom JS would follow Bootstrap -->
<script type="text/javascript" src="{% static 'js/base.js' %}"></script>

更新：

在这里取得一些进展：

$(function(){
    $('#navlinks li a').each(function(){
        var $this = $(this);
    if($this.attr('href').indexOf(current) !== -1){
        $this.addClass('active');
    }
});

因此，当我单击主页链接时，这可以解决问题，即联系人链接显示为“活动”，主页链接保持“禁用”。但是，当我单击主页链接时，两个链接都显示为“活动”状态。

我试图用这个来纠正这种情况：

$(function(){
    var current = location.pathname;
    $('#navlinks li a').each(function(){
        var $this = $(this);
    if($this.hasClass("active")){
        $this.removeClass('active');
    }
})
$('#navlinks li a').each(function(){
    var $this = $(this);
    // if the current path is like this link, make it active
if($this.attr('href').indexOf(current) !== -1){
    $this.addClass('active');
    }
})

});

知道为什么这对我的新情况没有帮助吗？我们快到了，谢谢大家！

【问题讨论】：

我更新我的答案

标签： javascript jquery html

【解决方案1】：

其他项目不只是兄弟。你应该这样做

$(this).addClass('active').parent().siblings().find('a').removeClass('active');

【讨论】：

【解决方案2】：

首先，您必须将click 放在引号内。

将类添加到<a> 后，您必须再次访问“li”并找到其兄弟姐妹，然后找到所有<a> 并删除该类

$(document).ready(function() {
    $("#navlinks li a").on('click', function() {
        $(this).addClass('active').closest('li').siblings().find('a').removeClass('active');
    })
});

添加答案

只需使用此代码，将类添加到您的 URL 中的锚基 :)

$(function(){
    $("ul li a").each(function() {   
    if (this.href == window.location.href) {
        $(this).addClass("active");
    }
});
});

【讨论】：

嗯，这似乎没有奏效。我需要在某处覆盖引导程序吗？
这仍然没有成功。不知道发生了什么。如果我只是在没有 .on() 事件调用的情况下添加一个 addClass('active') 语句，它就可以正常工作。我犯了语法错误吗？
@AndyG 我给你做了一个样本。 codepen.io/gerryl1991/pen/vQZmWJ，也许你可以使用click 事件。
@AndyG 我认为 charlie 是正确的，如果单击导航栏重新加载您的页面，该类将不存在，因此您必须检查当前 url 并将类添加到正确的锚标记。检查这个stackoverflow.com/questions/20060467/…
谢谢，我确实研究了他的解决方案，我确实取得了一些进展。我在这个过程中遇到了另一个问题。请参阅上面的更新。谢谢，您提供的链接是我使用它的方式。

【解决方案3】：

我建议直接定位链接而不是链接遍历，以使内容更具可读性和简洁性。

请注意，如果您实际上是在更改页面，这是徒劳的，因为您需要在页面加载时将链接与活动 url 进行比较。在前一页更改类不会有持久性

var $navLinks = $("#navlinks li a");

$navLinks.on('click', function() {
  $navLinks.removeClass('active');  
  $(this).addClass('active');
})

【讨论】：