CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mael Landrin
Mael Landrin

Reputation: 123

Add a class if url is equal to href of a link

I'm trying to make a jQuery script in WordPress, that will add the "active" class to the element of my sidebar that has the same URL as the matching link in the navbar.

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

It shows an error ( $ is not a function ), while there's another piece of code on the website that works well with the same selectors.

What's the issue here ? Thanks

Upvotes: 1

Views: 3600

Answers (3)

Sean T
Sean T

Reputation: 2494

You need to make sure your jquery script is loaded before your function is called. Just make sure the jquery script tag is before the script tag containing your code.

Aside from your initial error - what you have here will add .active to every li that's a child of .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
    }
});

You should make use of the this keyword. Something like

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

Upvotes: 1

Jamiec
Jamiec

Reputation: 136074

It shows an error ( $ is not a function )

This error was because you were redefining $ inside the each as the element being iterated:

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

There were a few things wrong with your code, but in general what you were doing was using selectors within the whole page instead of selectors with the current element being enumerated using 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>

Upvotes: 3

Dennis
Dennis

Reputation: 538

Try this:

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

Upvotes: -2

Related Questions