Блог

Главная - Вопросы по программированию - Проверка класса div на основе jQuery и редактирование CSS

Проверка класса div на основе jQuery и редактирование CSS

#jquery #css

#jquery #css

Вопрос:

У меня есть это навигационное меню, в котором я хочу, чтобы фон вкладки выбора текущей страницы был изменен с помощью jQuery. 

  <nav class="nav-container">
<ul id="main_menu" class="main_menu">


<li class="menu-item">
<a style="border-radius: 0px" class="button" href="who-are-we.php">Tab 1</a>
</li>

<li class="menu-item current-menu-ancestor active">
<a style="border-radius: 0px" class="button" href="who-are-we.php">Tab 2</a>
</li>

<li class="menu-item">
<a style="border-radius: 0px" class="button" href="who-are-we.php">Tab 3</a>
</li>

<li class="menu-item">
<a style="border-radius: 0px" class="button" href="who-are-we.php">Tab 4</a>
</li>

</ul>

</nav>

Я хочу добавить style=»background-color:aqua;» на вкладку 2.

Я хочу следовать этой логике :

 jquery if ( li contains class="current-menu-ancestor active" ) {

a style add "background-color: aqua;"

}

Как это сделать, пожалуйста??

Комментарии:

1. Непонятно, зачем вам для этого нужны сценарии. Почему вы не можете просто использовать CSS?

2. Bcoz, я хочу динамически вводить активный класс в спецификацию. Но это не работает. jsfiddle.net/gocwqmtr Посмотрите JSFiddle, пожалуйста, спасибо

3. 1) Прекратите вводить сокращенный текст телефонного сообщения и найдите время для форматирования разметки и кода. Действуйте как профессионал, если вы ожидаете профессионализма от своих добровольцев. 2) Послушайте, что вам здесь говорят профессионалы. Насколько мы можем судить, вам не нужен JavaScript для применения вашего стиля . Смотрите демонстрацию в ответе Луиса. Если это не отвечает на ваш вопрос, вам нужно пересмотреть свой пост, чтобы сделать его более понятным.

Ответ №1:

Просто используя CSS, это было бы:

 .menu-item.active a{
  background-color: aqua;
}

И изменить .active класс по щелчку мыши, если это еще не было обработано другим способом (?):

 $(".menu-item a").on("click",function(){
  $(".active").removeClass("active");
  $(this).parent(".menu-item").addClass("active");
}

Демонстрационная скрипка

Комментарии:

1. @tazcoder, я добавил демо-версию. Обратите внимание на значительно упрощенный скрипт и CSS.