Можете объяснить данную функцию?

217

30 июня 2022, 03:30

Ясно, что при нажатии на ul.tabs__caption происходит событие и что дальше?

(function($) {
$(function() {
  
  $('ul.tabs__caption').on('click', 'li:not(.active)', function() {
    $(this)
      .addClass('active').siblings().removeClass('active')
      .closest('div.tabs').find('div.tabs__content').removeClass('active').eq($(this).index()).addClass('active');
  });
  
});
})(jQuery);

Answer 1

На li у которых отсутсвует класс .active, при нажатии, вешается функция, которая:

Первая строка:

добавляет класс active для нажатого li .addClass('active')
берет остальные элементы, на том же уровнеsiblings() и удаляет у них класс active .removeClass('active')

Вторая строка:

берет ближайший div c классом .tabs closest('div.tabs')
находит в них дивы с классами .tabs__content find('div.tabs__content') и удаляет во всех нашедшихся дивах классы active .removeClass('active')
берет элемент с порядковым номером (нумерация с нуля) нажатого li eq($(this).index()) и добавляет туда класс active .addClass('active')

$(this) это текущий элемент li (на который нажали)

тоесть фактически происходит переключение класса active в элементах li и переключение класса active в дивах с учетом нажатого элемента li