@Sanekkes

Как при нажатии на блок изменить другой блок с такими же номером индекса?

Здравсвуйте!
Есть следующий код
<style>
.Slides{width:100%; padding-bottom:10px;}
.Slide{width:300px;height:100px; background:#d9d9d9; margin:5px; display:inline-block; padding:5px;}
.Nav{display:inline-block; width:150px; height:50px; background:#77c720; padding:5px;}
</style>
<div class="Slides">
<div class="Slide">1</div>
<div class="Slide">2</div>
<div class="Slide">3</div>
<div class="Slide">4</div>
</div>
<div class="Navigation">
<div class="Nav">1</div>
<div class="Nav">2</div>
<div class="Nav">3</div>
<div class="Nav">4</div>
</div>

Как можно сделать так что при нажатии на зелёный блок менялся цвет серого блока с таким же индексом?
5ad5ba880ddd3045928762.png
  • Вопрос задан
  • 31 просмотр
Решения вопроса 1
freislot
@freislot
Frontend-разработчик
https://codepen.io/freislot/pen/BxBQKo

$('.Navigation').on('click', '.Nav', function(){
  var index = $(this).index();
  $('.Slides .Slide').removeClass('active').eq(index).addClass('active');
});


В переменную index записываем индекс нажатого элемента, затем по индексу добавляем класс active к нужному слайду. По аналогии сделаете то, что вам нужно, поменяете цвет или класс или что-то еще.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы