JSFiddle - React, Tailwind, and code Playground

by jun68ykt

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<ul class="infiniteslider-list">
  <li>
    <span class="infinites-item">item A</span>
  </li>
  <li>
    <span class="infinites-item">item B</span>
  </li>
  <li>
    <span class="infinites-item">item C</span>
  </li>
  <li>
    <span class="infinites-item">item D</span>
  </li>  
   <li>
    <span class="infinites-item">item E</span>
  </li>  
</ul>


<div class="item-slider-detail">
  <div class="item-slider-detail-layer">
    アイテム説明A
  </div>
  <div class="item-slider-detail-layer">
    アイテム説明B
  </div>
  <div class="item-slider-detail-layer">
    アイテム説明C
  </div>
  <div class="item-slider-detail-layer">
    アイテム説明D
  </div>
  <div class="item-slider-detail-layer">
    アイテム説明E
  </div>
</div>

CSS

.active {
  background-color: red;
}

JavaScript

$('.infiniteslider-list li').each(function(index) {
  $(this).on('click', function() {
    $('.item-slider-detail-layer:nth-child(' +(index+1) + ')')
   	  .addClass('active')
      .siblings('.active')
      .removeClass('active');
  });
});