Блог

Главная - Вопросы по программированию - начальная загрузка 4 таблетки не меняют цвет при нажатии

начальная загрузка 4 таблетки не меняют цвет при нажатии

#javascript #bootstrap-4

Вопрос:

Я пытаюсь использовать этот пример с загрузочными таблетками, но с ним не сочетается javascript или css. Как мне выделить таблетки, на которые нажимают? В примере, когда нажимается таблетка, она становится фиолетовой. Я пытаюсь сделать что-то вроде приведенного ниже, но это не работает. Спасибо.

 $('#nav-link').on('click', function(e) {
  this.backgroundColor = 'black';
});

Ответ №1:

Вы должны переключить класс, который задает фон.

JS

  $('#navbar #nav-link').removeClass("active");
 $(this).addClass('active');

#navbar-это идентификатор вашей навигационной панели.

CSS

 .active { 
    background: black;
}
 
 $("#navbar").on("click", "li", function(e) {
  $('#navbar ul li').removeClass("active");
  $(this).addClass('active');
}); 
 .active {
  background: red;
} 
 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<nav class="navbar navbar-light navbar-expand-sm" id="navbar">
  <div class="collapse navbar-collapse" id="navbar-list-2">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Blog</a>
      </li>
    </ul>
  </div>
</nav>
Метки: