タブの切り替え、複数個所を同時に切り替える方法

Question

コピペマークアップエンジニアです。JS,jQueryは赤ちゃんです。

WEBサイト実装において、タブでの表示・非表示を実装しています。

単体では機能しますが、複数＆別のDIV要素内で実装しようとすると、HTMLで最初のアンカーリンクのHTMLのみ切り替わってしまって躓いております。

実現したいこと

別々の箇所に配置されたDIV要素( .example2, .example3 の部分)のtab切り替えを、.tabsと同時に表示・非表示させたい

実装中のコード

<div class="example2">
  ここの要素内も、下のタブ切り替えと同期させたい。
</div>

<div class="example3">
  ここの要素内も、下のタブ切り替えと同期させたい。
</div>

<div class="wrap">
  <ul class="tabs group">
    <li><a class="active" href="#/one">TAB 1</a></li>
    <li><a href="#/two">TAB 2</a></li>
    <li><a href="#/three">TAB 3</a></li>
  </ul> 
  <div id="content">
    <p id="one"> TAB 1 のコンテンツ内容 </p>
    <p id="two"> TAB 2 のコンテンツ内容 </p>
    <p id="three"> TAB 3 のコンテンツ内容 </p>
  </div>
</div>

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous">
</script>

(function($) {

	var tabs =  $(".tabs li a");

	tabs.click(function() {
		var content = this.hash.replace('/','');
		tabs.removeClass("active");
		$(this).addClass("active");
    $("#content").find('p').hide();
    $(content).fadeIn(200);
	});

})(jQuery);

配置に関しては、アンカーリンクのある.tabsよりも、上にあるコンテンツ、という位置関係で、
.example2, .example3 も一緒に表示・非表示させたいです。

cssは無視でかまいません。

もしお答えいただけたら幸いです！

Comments

[azuapricot]

css はありますか？
再現可能なコードをご提示ください

[masao1991]

ありがとうございます！
cssは無視してもらってかまいません。プレーンな状態で動けばOKです。

質問内容に「動作サンプル」追記しました！

Answer 1

<style>
#tab1,#tab2,#tab3{display:none}
.example2 , .example3 ,#one,#two,#three{display:none}
#tab1:checked ~ .wrap #one{display:block;}
#tab1:checked ~ .wrap #one{display:block;}
#tab2:checked ~ .wrap #two{display:block;}
#tab3:checked ~ .wrap #three{display:block;}

#tab1:checked ~ .wrap #a1{color:red;}
#tab2:checked ~ .wrap #a2{color:red;}
#tab3:checked ~ .wrap #a3{color:red;}

#tab2:checked ~ .example2{display:block;}
#tab3:checked ~ .example3{display:block;}

</style>
<input type="radio" name="tab" id="tab1" value="1" checked>
<input type="radio" name="tab" id="tab2" value="2">
<input type="radio" name="tab" id="tab3" value="3">
<div class="example2">
  (2)ここの要素内も、下のタブ切り替えと同期させたい。
</div>

<div class="example3">
  (3)ここの要素内も、下のタブ切り替えと同期させたい。
</div>

<div class="wrap">
  <ul class="tabs group">
    <li><a id="a1" href="#/one"><label for="tab1">TAB 1</label></a></li>
    <li><a id="a2" href="#/two"><label for="tab2">TAB 2</label></a></li>
    <li><a id="a3" href="#/three"><label for="tab3">TAB 3</label></a></li>
  </ul> 
  <div id="content">
    <p id="one"> TAB 1 のコンテンツ内容 </p>
    <p id="two"> TAB 2 のコンテンツ内容 </p>
    <p id="three"> TAB 3 のコンテンツ内容 </p>
  </div>
</div>

Comments

[masao1991]

ありがとうございます！
cssで再現できるのですね、こちらの方法でも試してみます！