<ulclass="tab"><liclass="carrent"rel="item1">メニュー１</li><!-- 初期で選択状態のものにクラス「carrent」 --><lirel="item2">メニュー２</li><!--rel属性を作り、任意の名前を設定 --></ul><divclass="items"><divclass="detail item1"><!-- 上のタブのrelと連動するようにクラス名を付ける（例：item1） --><p>ここに1つ目のアイテムの内容を入れる</p><p>ここに1つ目のアイテムの内容を入れる</p><p>ここに1つ目のアイテムの内容を入れる</p></div><divclass="detail item2"><!-- 同様にクラス名を付ける --><p>ここに2つ目のアイテムの内容を入れる</p><p>ここに2つ目のアイテムの内容を入れる</p><p>ここに2つ目のアイテムの内容を入れる</p><p>ここに2つ目のアイテムの内容を入れる</p></div></div>

.tab{width:300px;/* 横幅を300pxに指定 */display:flex;/* タブを横並びの配置にする */}.tabli{color:#aaa;/* 文字色をグレーに（選択されていない方の色） */font-size:16px;/* 適当な文字サイズを入力 */text-align:center;/* 文字を中央揃えにする */width:50%;/* タブが2つなので半分ずつするため50%を指定 */border:1pxsolid#000;/* 1pxの枠線を作成 */padding:5px10px;/* 余白を指定 */cursor:pointer;/* マウスカーソルが乗った時👆の形にする */}.tabli.carrent{color:#fff;/* 選択されているときは文字色を白 */font-weight:bold;/* 選択されているときは太文字 */background:#777;/* 選択されているときは背景色をグレー */}.items.detail{font-size:14px;/* 文字サイズを14pxに指定 */width:300px;/* 横幅を300pxに指定 */color:#fff;/* 文字色を白に指定 */background:#000;/* 背景色を黒に指定 */box-sizing:border-box;/* 余白の計算を簡単にする */padding:10px20px;/* 余白を指定 */display:none;/* ページ読み込み時は非表示 */}

$('.item1').show();// 初期で見せる箇所を表示$('.tab li').on('click',function(){// どれかのタブがクリックされた時/* タブの処理 */$('.tab li').removeClass('carrent');// タブについているクラス「carrent」を削除$(this).addClass('carrent');// クリックしたタブを選択状態にするためクラス「carrent」を追加/* itemの処理 */$('.detail').hide();// 一度詳細を全ての「.detail」を非表示にするvartarg=$(this).attr('rel');// クリックしたタブのrel属性の値を取得$('.'+targ).fadeIn();// 取得したrel情報と同じクラスをもつitemを表示});