Как сделать такую смену классов и блоков? [дубликат]

133

21 июля 2019, 21:10

На данный вопрос уже ответили:

Аккордеон на чистом Javascript 3 ответа

Всем привет! Суть такая: есть 4 кнопки с одинаковыми классами и есть класс active; при клике на одну из кнопок, нужно добавлять ей класс active и отображать блок который нужно отобразить. При следующем клике на вторую кнопку, с первой кнопке снять класс active и повесить его второй кнопке, а так же отобразить уже другой блок на том же месте. Как такое сделать?

Answer 1

Можно так:

$('.button').on('click',function(){ 
  $('.block').removeClass('active').addClass('none'); 
  $('#block-'+$(this).attr('data-id')).removeClass('none').addClass('active'); 
});

.active{ 
  display:block; 
} 
.none{ 
  display:none; 
} 
#block-1{ 
 background:red; 
} 
#block-2{ 
 background:green; 
} 
#block-3{ 
 background:blue; 
} 
#block-4{ 
 background:yellow; 
} 
.button{ 
  margin: 5px; 
  padding: 10px; 
  background: grey; 
  cursor:pointer; 
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div id="block-1" class="block active">1</div> 
<div id="block-2" class="block none">2</div> 
<div id="block-3" class="block none">3</div> 
<div id="block-4" class="block none">4</div> 
<hr> 
<div class="button" data-id="1">Кнопка 1</div> 
<div class="button" data-id="2">Кнопка 2</div> 
<div class="button" data-id="3">Кнопка 3</div> 
<div class="button" data-id="4">Кнопка 4</div>