<div class="container">
  <ul class="tab">
    <li class="active">パスタ</li>
    <li>カレー</li>
    <li>サラダ</li>
  </ul>
  <ul class="content">
    <li class="active">
      <p>トマトソース</p>
      <p>ミートソース</p>
      <p>クリームソース</p>
    </li>
    <li>
      <p>キーマカレー</p>
      <p>チキンカレー</p>
      <p>ラムカレー</p>
    </li>
    <li>
      <p>シーザーサラダ</p>
      <p>マリネサラダ</p>
      <p>コブサラダ</p>
    </li>
  </ul>
 </div>
.container{
	padding: 20px;
}
.tab{
	display: flex;
	justify-content: space-between;
}
.tab li{
	width: 33%;
	font-weight: bold;
	padding: 20px;
	border: 2px solid #000;
	border-bottom: none;
	box-sizing: border-box;
	cursor: pointer;
}
/*クラスに「active」が付与されたときの指定*/
.tab li.active{
	background: #ccc;
}
.content{
	padding: 20px;
	border: 2px solid #000;
}
/*通常時は「display: none;」で非表示にしておく*/
.content li{
	display: none;
}
.content li p{
	background: #ccc;
	padding: 20px;
	margin: 10px 0;
}
/*クラスに「active」が付与されたとき「display: block;」で表示する*/
.content li.active{
	display: block;
}
$(function(){
	var tab = $('.tab > li'),
      content = $('.content > li');

  tab.on('click',function(){
    //何番目のメニューがクリックされたのか、番号を取得する
    var idx = tab.index($(this));
    //「active」クラスを削除して、取得した番号と一致する要素に「active」クラスを付与する
		tab.removeClass("active").eq(idx).addClass("active");
    //「active」クラスを削除して、取得した番号と一致する要素に「active」クラスを付与する
		content.removeClass("active").eq(idx).addClass("active");
	});
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js