JSFiddle - React, Tailwind, and code Playground

by majikarikeruo

HTML

<ul class="p-tabs">
  <li class="p-tabs__item active"><a href="#">Menu1</a></li>
  <li class="p-tabs__item"><a href="#">Menu2</a></li>
</ul>

<div class="p-tab-contents">
  <div class="p-tab-contents__item current">
    これがメニュー１。この中にコンテンツを入れていってください。
  </div>
  <div class="p-tab-contents__item">
    これがメニュー2。この中にコンテンツを入れていってください。
  </div>
  
</div>

CSS

.p-tabs{
  display: flex;
  margin: 0;
  list-style: none;
}

.p-tabs__item{
  margin: 0 20px;
}

.p-tabs__item a{
  display: block;
  padding: 8px 12px;
  border: solid 1px #333;
  border-bottom: none;
  color: #333;
  text-decoration: none;
}

.p-tabs__item.active a{
  background: #333;
  color: #fff;
}

.p-tab-contents{
  padding: 8px;
  border: solid 1px #333;
}

.p-tab-contents__item{
  display: none;
}

.p-tab-contents__item.current{
  display: block;
}

JavaScript

$('.p-tabs__item').on('click', function(){

	$('.active').removeClass('active');
	$(this).addClass('active');
  
  const selectedTabIndex = $(this).index();

  $('.current').removeClass('current');
	$('.p-tab-contents__item').eq(selectedTabIndex).addClass('current');
});