@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
Похожие вопросы
Blogman Оренбург
от 20 000 до 60 000 руб.
Энергомера Ставрополь
от 28 000 до 30 000 руб.
от 40 000 до 50 000 руб.
17 дек. 2018, в 22:08
5000 руб./за проект
17 дек. 2018, в 21:19
1 руб./за проект