Как заменить контент при нажатии на кнопку?

Question

[Лев Яковлев]

Не получается заменить контент при нажатии на определенную кнопку.
После нажатия должен выходить контент при display: block; а остальной контент иметь значение display: none;
Цвета кнопки получилось заменить, но не контент.
Как добавить класс .active-clothes в зависимости от выбранной кнопки?
Возможно кто-то подскажет решение через data атрибут, или через более понятный способ?

<div class="size-tabs-wrapper">
	<div class="sz-tbs" id="buttons-grid"><a class="size-tabs active" data-tab="tab-1">Кнопка 1</a></div>
	<div class="sz-tbs" id="buttons-grid"><a class="size-tabs" data-tab="tab-2">Кнопка 2</a></div>
	<div class="sz-tbs" id="buttons-grid"><a class="size-tabs" data-tab="tab-3">Кнопка 3</a></div>
	<div class="sz-tbs" id="buttons-grid"><a class="size-tabs" data-tab="tab-4">Кнопка 4</a></div>
</div>


<div class="contactAndMapBlock__wrapper" id="contactAndMapBlock__wrapper">
	<div class="contactAndMapBlock__right contactAndMapBlock__right-wrapper active-clothes" data-item="tab-1">Контент 1</div>
	<div class="contactAndMapBlock__right contactAndMapBlock__right-wrapper" data-item="tab-2">Контент 2</div>
	<div class="contactAndMapBlock__right contactAndMapBlock__right-wrapper" data-item="tab-3">Контент 3</div>
	<div class="contactAndMapBlock__right contactAndMapBlock__right-wrapper" data-item="tab-4">Контент 4</div>
</div>

.active{
    background: #000;
    border-radius: 10px;
    color: #fff;
}


.active-clothes{
display:block !important;
  
}

.contactAndMapBlock__right-wrapper{
display: none;

}

$(document).ready(function(){
    
$('#buttons-grid a').click(function () {
  
 var index = $(this).index();
  
  //замена цвета кнопки
  $('#buttons-grid a.active').removeClass('active');
  $(this).addClass('active');

  //замена контента
  $('#contactAndMapBlock__wrapper div.active-clothes').removeClass('active-clothes');
  //  $('#contactAndMapBlock__wrapper div').eq(index).addClass('active-clothes');
});
});

Comments

[Сергей delphinpro]

Ok, Google, как сделать табы на javascript

Answer 1

[Paul14]

Реализация табов. Сначала определяем индекс (порядковый номер) кнопки среди всех кнопок.
Затем производим операции для всех кнопок (удалим класс) , а далее проведем операции с той кнопкой, на какую нажали ( метод eq(index) ). С отображаемым контентом тоже самое. Я сделал через show/hide, можно через удаление/ добавление класса.

$('#buttons-grid a').click(function () {  
   var index = $('#buttons-grid a').index($(this));
   $('#buttons-grid a').removeClass('active').eq(index).addClass('active');
   $('#contactAndMapBlock__wrapper .contactAndMapBlock__right').hide().eq(index).show();
});

Answer 2

[HardBot]

Рассказываю как это делается для тех, кто в принципе забыл русские буквы, дабы гуглить.

Перебираешь циклом все кнопки, в аргументах принимаешь event, после отслеживаешь клик и с помощью event.target получаешь атрибут, ищешь атрибут на странице и делаешь то, что тебе нужно. Если хочешь, чтобы при каждому клике другой контент скрывался, сначала даешь всем display: none,а после определенному контенту даешь display: block