Как сделать переключатель вкладок?

Question

[Расул Гитинов]

Пытаюсь сделать переключатель вкладок с помощью атрибута "data-id". Вот такой код:

$(function(){
	$('#support nav a').click(function(e) {
		e.preventDefault();
		$('#support nav .active').removeClass('active');
		$(this).addClass('active');
		var tab = $(this).attr('data-id');
		$('#support .slide').not(tab).addClass('active');
		$(tab).addClass('active');
	});
});

Вроде как все работает и при нажатии активируется и пункт меню и вкладка, но предыдущая вкладка не закрывается и они накладываются друг на друга. Вот разметка:

<nav>
	<a href="#0" class="active" data-id="1">Запуск магазина</a>
	<a href="#0" data-id="2">Обучение сотрудников</a>
	<a href="#0" data-id="3">IT-поддержка 24/7</a>
	<a href="#0" data-id="4">Маркетинг</a>
</nav>
<div class="slides">
	<div class="slide active" data-id="1">Слайд 1</div>
	<div class="slide" data-id="2">Слайд 2</div>
	<div class="slide" data-id="3">Слайд 3</div>
	<div class="slide" data-id="4">Слайд 4</div>
</div>

Answer 1

[Егор Живагин]

$(function(){
  $('#support nav a').click(function(e) {
    e.preventDefault();
    $(this).addClass('active').siblings().removeClass('active');
    var tab = $(this).data('id');
    $('#support .slide[data-id="' + tab + '"]').addClass('active').siblings().removeClass('active');
  });
});

Почитайте про siblings() , всё очень просто

UPD: Заменил attr() на data() , так чуть правильнее

Comments

[Расул Гитинов]

Спасибо большое!

[Егор Живагин]

Расул Гитинов: всегда пожалуйста!

Answer 2

[one_day]

https://codepen.io/one_day/pen/GvBLRa

Comments

[Расул Гитинов]

Спасибо!