Добавить класс в текущем меню в jQuery через window.location

Question

У меня есть html, который имеет класс js-nav и data-id, который я хочу использовать для определения текущего скользящего меню.

<a class="nav-link js-nav" data-id="about" href="/#about">About</a>

То, что я сделал с моим кодом, это сначала получите текущий URL и отфильтруйте его, пока я не получу текущий #about URL. Затем он сравнится с data-id, если они совпадают, добавив перед ним символ #. И затем, если они равны, я должен добавить класс active-menu к тегу привязки js-nav, чтобы выделить его, но мне также нужно удалить любой существующий класс active-menu для всех элементов. Вот мой код.

var url = window.location.href;
var link = url.split('/')[3];
var item = $('a[data-id]');

if ('#' + item == link){
  $('a.js-nav').toggleClass('active-menu')

Здесь я хочу выделить текущее меню, добавив класс active-menu к текущему скользящему элементу привязки, который я определяю по URL. Мне также нужно удалить любой существующий класс active-menu для любого якоря, когда я добавляю класс, чтобы убедиться, что только один элемент будет иметь активный класс.

Сейчас этот код не работает, особенно в той части, где Я добавляю символ # в переменную item, чтобы сравнить его со ссылкой.

Как исправить код, чтобы получить правильный вывод? }

Answer 1

В вашем коде есть ошибки:

var item = $('a[data-id'); //Missing ] at the end

Если вы хотите получить значение data-id, вам нужно будет использовать $('.nav-link').data('id');

Затем удалите все .active-menu класс из всех ваших элементов:

$('.active-menu').removeClass('active-menu');

И, наконец, добавьте класс к нужному элементу:

$('#' + item).toggleClass('active-menu');

Answer 2

function activateNavLink() {
  var url = window.location.href;
  var link = url.split('/')[3];

  link = 'about'; // <<<< for demo only remove this line 

  $('.nav-link.js-nav').removeClass('active-menu'); // remove all active 
  $('a[data-id="' + link + '"]').addClass('active-menu'); // add active to only this
}


activateNavLink();

.active-menu {
  background: blue;
  color: white;
}

<a class="nav-link js-nav" data-id="about" href="/#about">About</a> -
<a class="nav-link js-nav" data-id="contactus" href="/#contactus">Contact Us</a>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 3

var url = window.location.href;
// var link = url.split('/')[3]; --> This won't always work because it will depend on the number of slashes you have, so I would replace it with 
var link = window.location.hash
$('a.js-nav.active-menu').removeClass('active-menu'); //will remove all actives
$('a.js-nav[data-id="' + link.replace('#', '') + '"]').addClass('active-menu'); //will add the class to the one you want