前提・実現したいこと
CSSだけでページ内タブ切り替えをしていました。
以下のようにAをクリックしたらA-1、A-2、A-3のbuttonに装飾したテキストが出てきました。ここまではできたのですが、やりたいことは、
更にこのA-1を押したらA-1-1、A-1-2、A-1-3 A-2を押したらA-2-1、A-2-2、A-2-3といった、さらにページ内タブ切り替えをしたいのですが、どうやってもA-1を押したら最初のA、B、Cが表示されてるだけの表示に戻ってしまいます。
まだまだJSがよくわかっていないのでCSSのみでやってみたのですが、どうやったらできるでしょうか....。
社内に相談できる人がおらず、一人ではどうにもならないのでご相談させていただきました。
最終的にはこのA-1-1をさらにクリックしたら軽い商品詳細ページみたいなものになるので、1ページ内でページ内タブ切り替えを3回したいです。
やはりjsのほうが簡単にできるのでしょうか?。
HTML
<input id="tab-A" type="radio" name="tab_item" checked> <label class="tab_box" for="tab-A">A</label> <input id="tab-B" type="radio" name="tab_item"> <label class="tab_box" for="tab-B">B</label> <input id="tab-C" type="radio" name="tab_item"> <label class="tab_box" for="tab-C">C</label> <!--Aをクリックしたら出てくるcontents--> <div class="tab_content" id="tab-1_content"> <input id="tab-A-1" type="radio" name="tab_item" checked> <label class="tab_contents" for="tab-A-1">A-1</label> <input id="tab-A-2" type="radio" name="tab_item"> <label class="tab_contents" for="tab-A-2">A-2</label> <input id="tab-A-3" type="radio" name="tab_item"> <label class="tab_contents" for="tab-A-3">A-3</label> </div> <!--A-1をクリックしたら出てくるcontents--> <div class="tab_content" id="tab-1-1_content"> <input id="tab-A-1-1" type="radio" name="tab_item" checked> <label class="tab_contents" for="tab-A-1-1">A-1-1</label> <input id="tab-A-1-2" type="radio" name="tab_item"> <label class="tab_contents" for="tab-A-1-2">A-1-2</label> <input id="tab-A-1-3" type="radio" name="tab_item" checked> <label class="tab_contents" for="tab-A-1-3">A-1-3</label> </div>
CSS
/*タブのスタイル*/ .tab_item { width: 178px; height: 50px; background-color: #d9d9d9; line-height: 50px; font-size: 13px; text-align: center; color: #565656; display: block; float: left; text-align: center; font-weight: bold; transition: all 0.2s ease; margin-bottom:5px; border: 1px solid #000; margin-right: 15px; } .tab_item_last{ width:178px; height: 50px; background-color: #d9d9d9; line-height: 50px; font-size: 13px; text-align: center; color: #565656; display: block; float: left; text-align: center; font-weight: bold; transition: all 0.2s ease; margin-bottom:5px; border: 1px solid #000; margin-right:0; } .tab_item:hover, .tab_item_last:hover{ opacity: 0.75; } /*ラジオボタンを全て消す*/ input[name="tab_item"] { display: none; } /*タブ切り替えの中身のスタイル*/ .tab_content { display: none; padding: 40px 0px; clear: both; overflow: hidden; } /*選択されているタブのコンテンツのみを表示*/ #tab-A:checked ~ #tab-1_content, #tab-A-1:checked ~ #tab-1-1_content, { display: block; }
回答1件
あなたの回答
tips
プレビュー