JQuery 3.3.1 --- addClass to

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!

score 2 · Answer 1 · answered Nov 16 '18 at 02:34

2

The other items are not just sibling. You should do instead

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

answered Nov 16 '18 at 02:34

Amm Sito

21
2

user123 · Accepted Answer · 2018-11-16T06:26:20.673

1

First, you have to put click inside a quote.

After adding class to <a> you have to access your 'li' again and locate its siblings, then find all <a> and remove the class

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

ADDED ANSWER

just use this code, to add class to anchor base from your URL :)

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

edited Nov 16 '18 at 06:26

answered Nov 16 '18 at 02:36

user123

435
1
6
23

hmm this did not seem to do the trick. Do I need to be overriding bootstrap somewhere? – Andy Nov 16 '18 at 02:44
that still didn't do the trick. Not sure what's going on. If I just make a statement adding a addClass('active') without the .on() event call, it works just fine. Is there a syntax error I am making? – Andy Nov 16 '18 at 03:04
@AndyG I made you a sample. https://codepen.io/gerryl1991/pen/vQZmWJ, maybe you can just use the `click` event. – user123 Nov 16 '18 at 03:08
@AndyG I think charlie is correct, if clicking on the navbar reload your page that class wont exist, so you have to check the current url and add class to the right anchor tag. check this https://stackoverflow.com/questions/20060467/add-active-navigation-class-based-on-url – user123 Nov 16 '18 at 03:24
thanks, I did look into his solution and I definitely made some progress. I ran into another issue in the process. See my update above. Thanks, the link you provided is the way I went with it. – Andy Nov 16 '18 at 05:13

score 0 · Answer 3 · answered Nov 16 '18 at 03:04

I would suggest directly targeting the links instead of chaining traverses to make things more readable and concise.

Note if you are actually changing pages this is futile as you will need to compare the links to active url on page load. Changing class in prior page will not have persistence

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

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

JQuery 3.3.1 --- addClass to

3 Answers3