JSFiddle - React, Tailwind, and code Playground

by jun68ykt

HTML

<ul class="infiniteslider-list">
  <li>
    <span class="infinites-item1">item1</span>
  </li>
  <li>
    <span class="infinites-item2">item2</span>
  </li>
</ul>


<div class="item-slider-detail">
  <div id="detail-item1" class="item-slider-detail-layer">
    アイテム説明1
  </div>
  <div id="detail-item2" class="item-slider-detail-layer">
    アイテム説明2
  </div>
</div>

CSS

.active {
  background-color: red;
}

JavaScript

$('.infiniteslider-list li').click(function(e) {
  var clazz = e.target.className;
  var num = clazz.slice(-1) ; 
  $('#detail-item' + num).toggleClass('active');
});