I want to create a jQuery script within WordPress that will assign the "active" class to the sidebar element matching the URL of the corresponding 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>An error is displayed ( $ is not a function ), even though there is another part of the code on the site that works correctly using the same selectors.
What could be causing this issue? Thank you