Как я могу изменить цвет фона выпадающего меню bootstrap 3 после щелчка?

Проблема в том, что когда я нажимаю раскрывающийся список, текст становится черным, поэтому мне нужно изменить его на белый. когда я удалю цвет #tab, я изменю его на #9e9e9d.

# вкладка { черный цвет }

#tab:hover {
  color: white;
}

      <div class = "collapse navbar-collapse" id = "myNavbar">
    <ul class = "nav navbar-nav">
      <li><a href = "index.html" id = "tab">HOME</a></li>
      <li><a href = "Beverages.html" id = "tab">MENU</a></li>
      <li class = "dropdown">
        <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" id = "tab">PROMOTION <span class = "caret"></span></a>
        <ul class = "dropdown-menu">
          <li><a href = "#">Gift Cards</a></li>
          <li><a href = "#">Christmas Bundle</a></li>
        </ul>
      </li>
      <li><a href = "About.html" id = "tab">ABOUT</a></li>
      <li><a href = "Faq.html" id = "tab">FAQ</a></li>
    </ul>
  </div>

html

13.12.2020 15:38

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я дал решение на jquery, так как вы упомянули bootstrap. Решение использует метод toggleClass().

Было ли это необходимо?

$('.dropdown').on('click', function() {
  $(this).toggleClass('a_color_active');
  $('.dropdown-menu').toggleClass('ul_color_active');
});

.dropdown {
  background-color: pink;
}

.dropdown-menu {
  display: none;
}

.dropdown a,
.dropdown-menu a {
  color: unset;
}

.dropdown.a_color_active {
  background-color: black;
  color: white;
}

.dropdown-menu.ul_color_active {
  display: block;
  background-color: black;
  color: white;
}

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

<li class = "dropdown">
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" id = "tab">PROMOTION <span class = "caret"></span></a>
  <ul class = "dropdown-menu">
    <li><a href = "#">Gift Cards</a></li>
    <li><a href = "#">Christmas Bundle</a></li>
  </ul>
</li>

второй:

$('.dropdown').on('click', function() {
  $(this).toggleClass('a_color_active');
  $('.dropdown-menu').toggleClass('ul_color_active');
});

.nav.navbar-nav a {
  color: black;
}

.nav.navbar-nav a:hover {
  color: white;
}

.dropdown-menu {
  display: none;
}

.nav.navbar-nav a,
.dropdown-menu a {
  color: unset;
}

.dropdown.a_color_active {
  background-color: black;
  color: white;
}

.dropdown-menu.ul_color_active {
  display: block;
  background-color: black;
  color: white;
}

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

<div class = "collapse navbar-collapse" id = "myNavbar">
  <ul class = "nav navbar-nav">
    <li><a href = "index.html" id = "tab">HOME</a></li>
    <li><a href = "Beverages.html" id = "tab">MENU</a></li>
    <li class = "dropdown">
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" id = "tab">PROMOTION <span class = "caret"></span></a>
    <ul class = "dropdown-menu">
      <li><a href = "#">Gift Cards</a></li>
      <li><a href = "#">Christmas Bundle</a></li>
    </ul>
    </li>
    <li><a href = "About.html" id = "tab">ABOUT</a></li>
    <li><a href = "Faq.html" id = "tab">FAQ</a></li>
  </ul>
</div>

он не решил, что черный цвет на фоне активного раскрывающегося списка все еще черный, и изменился только цвет <li>. попробуйте просмотреть мой пример скриншота, чтобы узнать, что я говорю за спасибо.

— 13.12.2020 16:38

попробуйте сделать красный цвет фона неактивным и активным в раскрывающемся списке

— 13.12.2020 16:53

Извини чувак. Я очень хочу вам помочь, но не могу понять, какого результата вы хотите.

— 13.12.2020 16:59

подождите, я добавлю скриншот

— 13.12.2020 17:08

пожалуйста, проверь еще раз мой пост, братан

— 13.12.2020 17:21

см. второе решение (второй фрагмент)

— 13.12.2020 17:51

рад помочь, бро :)

— 13.12.2020 18:08

Добавлю в комментарий.. Обратите внимание, что все теги a используют один идентификатор tab - это неверно. Идентификатор должен быть уникальным для каждого тега. Я изменил css. Был #tab, а теперь .nav.navbar-nav a.

— 13.12.2020 18:14

13.12.2020 16:23