1

Есть табы, при нажатии на которые добавлением классов меняется иконка вкладки. Нужно, чтобы при клике на любую другую вкладку у неактивных элементов удалялись модифицирующие классы. Как правильно это сделать? [пример][1] для первых двух вкладок сделал, как оно примерно должно быть.

 [1]: https://codepen.io/Nick_Krogan/pen/zNQqam

3 ответа 3

1

Следует пользоваться toggleClass('модифицирующий класс'), вместо .removeClass и .addClass. Это метод работает как переключатель, т.е если есть модифицирующий класс, то он его удаляет, если нет, то наоборот присваивает.

1
  • если использовать тогл, тогда клас будет включатся и выключатся при нажатии на один и тот же элемент. надо чтобы он удалялся только при нажатии на другие вкладки
    –  nollac
    18 фев 2017 в 13:06
1

Если у вас есть некоторый набор элементов объединенных общим классом, например $('.vkladka') или общим родителем $('#vkladki > div'), то очень просто удалить с них всех ненужный класс:

$('#vkladki > div').removeClass('active')

И после этого сразу назначить новый:

$(this).addClass('active')

А так-же можно исключить из группы элементов активный с помощью not():

$('#vkladki > div').not(this).removeClass('active')

Еще вариант, получить соседние с нажатым элементы с помощью siblings()

$(this).addClass('active').siblings().removeClass('active')

Живой пример:

$('#vkladki > div').click(function() {
  $(this).addClass('active')
  $('#vkladki > div').not(this).removeClass('active')
})
#vkladki>div {  width: 100px;  padding: 4px;  border: 1px solid #ccc;  display: inline-block; cursor:pointer;}

#vkladki>div.active {
  border: 1px solid red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vkladki">
  <div class=active>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Живой пример с siblings():

$('#vkladki > div').click(function() {
  $(this).addClass('active').siblings().removeClass('active')
})
#vkladki>div {  width: 100px;  padding: 4px;  border: 1px solid #ccc;  display: inline-block; cursor:pointer;}

#vkladki>div.active {
  border: 1px solid red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vkladki">
  <div class=active>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

1
  • все классы active разные - в каждой вкладке иконка и бордер закрашиваются в свой цвет. если бы надо было применить одинаковый активный класс ко всем - вопросов бы не было. как можно выбрать все классы, заканчивающиеся на опред. слово?например, red_item, blue_item и т.п. перейдите по ссылке на кодпен внизу поста. там есть пример
    –  nollac
    18 фев 2017 в 13:32
0

С помощью .find('Общий идентификатор табов') берешь все табы, и по клику на любой таб удаляешь у всех модифицирующий класс, затем добавляешь класс на кликнутый таб $(this).addClass('Модифицирующий класс');

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.