Question

I am new to JQuery and am trying to add an 'active' tag to a bootstrap class. Can anyone let me know if there is something wrong with my syntax in my .js file.

Here is my base.js file:

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

Here is the html page I am using (using 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>

Just incase I am not ordering my .js files correctly, here is the bottom of my html page:

    <!-- 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>

UPDATE:

Making some progress here:

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

So this does the trick when I click the home link, ie, the Contact link appears 'active' and the Home link remains 'disabled.' However, when I click the Home link, both links appear in an 'active' state.

I tried to remedy the situation with this:

$(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');
    }
})

});

Any idea why this wouldn't help me with my new situation? We're getting there, thanks everyone!

Answer 1

其他项目不只是同级。您应该改为

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

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

Answer 3

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

请注意，如果您实际上要更改页面，这是徒劳的，因为您需要在页面加载时比较链接到活动url的链接。在前一页中更改班级将不会持续存在

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

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

jQuery 3.3.1-将addClass添加到<a>

3 个答案: