Как присвоить к nav-link класс active?

Question

[xxxibgdrgn]

Имеется навбар на bootstrap 4. В нём есть несколько элементов nav-item. Хотелось бы узнать каким образом можно присвоить элементу nav-item атрибут active, но не по нажатию на него, а в зависимости от значения некой переменной. То есть, например, если переменная a = 0, то сделать активным один элемент, если a = 1, то другой.

Comments

[Сергей delphinpro]

тег <active>, атрибут <a class="nav-link" active="">
или всё же класс <a class="nav-link active">?

[xxxibgdrgn]

Сергей delphinpro, Имеется код

• 
  Home
  
  
  
• 
  Links
  
  
  
• 
  About
  
  
• 
  Contact
  
  
  
• 
  Login
  
  

Чтобы сделать активным элемент nav-link по нажатию можно использовать js скрипт
$(".nav .nav-link").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).addClass("active");
});
Мне же нужно не по нажатию на элемент, а по значению некоторой переменной.

[Сергей delphinpro]

xxxibgdrgn, я не о том. Тег, атрибут и класс — это разные вещи. В заголовке вы пишете об одном, в вопросе о другом, а по факту вам нужно третье. Сначала с терминологией стоит разобраться...

Ответ на вопрос:

var a = 0;
// ...

var links = $('.nav .nav-link'); // примечание к этой строчке ниже
if (a<links.length) {
  links.removeClass('active');
  links.eq(a).addClass('active');
}

Примечание 1:
Выбирать пункты меню нужно по какому-то уникальному селектору.
Если у вас единственный элемент .nav с .nav-item внутри, то приведнный код отработает правильно. Если нет, нужно как-то уникализировать селектор, например '.header .nav .nav-link'.
Примечание 2:
Я предполагаю, что в переменной будет записан индекс активного элемента.

[xxxibgdrgn]

А если пунктам меню присвоить id разные например. И делать активным по id, тогда как будет выглядеть скрипт?

Answer 1

[Виктор Щербаков]

Как вариант с помощью jquery добавить класс
$("id элемента").addClass("active");