Как добавить класс active первому элементу в списке?

Question

[deniskins23]

Доброго времени суток. Есть реализованные табы на js. Реализовано так.

$(document).ready(function () {
	$('.s-services__tab_item').not('.active').hide();
	$('.s-services__controls_item').on('click',function (e) {
		e.preventDefault();

		var tabItem = $(this).closest('.s-services__controls_item'),
			tabContentItem = $('.s-services__tab_item'),
			tabItemPosition = tabItem.data('services');

		tabContentItem.filter('.s-services__tab_item-' + tabItemPosition)
			.fadeIn()
			.siblings()
			.hide();

		$(e.currentTarget)
			.addClass('active')
			.siblings()
			.removeClass('active');
	});
});

В html файле первому элементу .s-services__tab_item в списке изначально присвоен класс active. Все работает как надо. Но при посадке верстки на wordpress эти списки будут выводиться через цикл и первому элементу в html коде не присвоить сразу класс active. Как добавить это в js, чтобы он присваивал изначально первому .s-services__tab_item в списке класс active , но при кликах на контролы этот класс убирался у первого элемента и присваивался тому, на который был клик? Подскажите пожалуйста как подправить код.

Answer 1

[Андрей Седышев]

Да хотя бы так:

$(document).ready(function () {
  var $tabs = $('.s-services__tab_item');
  $tabs.first().addClass('active');
  $tabs.not('.active').hide();
  $('.s-services__controls_item').on('click',function (e) {
    e.preventDefault();

    var tabItem = $(this).closest('.s-services__controls_item'),
      tabContentItem = $('.s-services__tab_item'),
      tabItemPosition = tabItem.data('services');

    tabContentItem.filter('.s-services__tab_item-' + tabItemPosition)
      .fadeIn()
      .siblings()
      .hide();

    $(e.currentTarget)
      .addClass('active')
      .siblings()
      .removeClass('active');
  });
});

https://api.jquery.com/first/

Comments

[deniskins23]

Спасибо. Работает!+1 к ауре..