【CSSサンプル】タブ切り替え表示を２つ配置する場合

　どうも！LSSです！！

先日の記事、

を早速使ってくださった、421miyakoさん(id:m421miyako)から問い合わせがありました。

421miyako(id:m421miyako)

このスライダーを何の意味もなく上下の仕切り線みたいに使って、数字を出しておくと読者が、なんじゃこれの感じで混乱して面白そうです。先日のタブですが同じページに二か所入れると干渉しますか？二つ目がうまくいかなかったのでどうかなって。

（ちなみに、使っていただいた記事はこちら）

そういえば…IDを多用しているため、バリバリ干渉します！

同ページ内で複数置く事を考えていなかったんですね^^;

ラジオボタン・ラベル・中身の３種 × タブ数 のIDを使っていて、その全てを別名に変えるのと、ラジオボタンをグループ化している name="rdb" の名前も変えてあげると、複数でも動作します。

が、なかなか大変ですよね^^;

構造が分からないとなおさら。

という事で、やってみました！

タブ切り替えを２つ配置

タブ１タブ２タブ３タブ４

タブ１に対応する文章

タブ２に対応する文章

タブ３に対応する文章

タブ４に対応する文章

タブ１タブ２タブ３タブ４

タブ１に対応する文章

タブ２に対応する文章

タブ３に対応する文章

タブ４に対応する文章

コード

<style><!--
.divbox{position:relative;}
#lb1,#lb2,#lb3,#lb4{position:relative;top:8px;padding:0px 10px;border-width:1px;border-color:black;border-style:solid solid none solid;border-radius:8px 8px 0px 0px;z-index:1;transition:0.2s ease-out 0s;}
#rdb1,#rdb2,#rdb3,#rdb4{display:none;}
#nkm1,#nkm2,#nkm3,#nkm4{display:none;position:relative;padding:8px;width:100%;border-radius:0px 8px 8px 8px;border:1px solid black;z-index:0;}
#rdb1:checked~#lb1,#rdb2:checked~#lb2,#rdb3:checked~#lb3,#rdb4:checked~#lb4{top:10px;}
#rdb1:checked~#nkm1,#rdb2:checked~#nkm2,#rdb3:checked~#nkm3,#rdb4:checked~#nkm4{display:block;}
#lb1,#nkm1{background-color:#ffdddd;}
#lb2,#nkm2{background-color:#ddffdd;}
#lb3,#nkm3{background-color:#ddddff;}
#lb4,#nkm4{background-color:#ffffdd;}
#lb5,#lb6,#lb7,#lb8{position:relative;top:8px;padding:0px 10px;border-width:1px;border-color:black;border-style:solid solid none solid;border-radius:8px 8px 0px 0px;z-index:1;transition:0.2s ease-out 0s;}
#rdb5,#rdb6,#rdb7,#rdb8{display:none;}
#nkm5,#nkm6,#nkm7,#nkm8{display:none;position:relative;padding:8px;width:100%;border-radius:0px 8px 8px 8px;border:1px solid black;z-index:0;}
#rdb5:checked~#lb5,#rdb6:checked~#lb6,#rdb7:checked~#lb7,#rdb8:checked~#lb8{top:10px;}
#rdb5:checked~#nkm5,#rdb6:checked~#nkm6,#rdb7:checked~#nkm7,#rdb8:checked~#nkm8{display:block;}
#lb5,#nkm5{background-color:#000000;color:#ffffff;}
#lb6,#nkm6{background-color:#333333;color:#aaaaaa;}
#lb7,#nkm7{background-color:#aaaaaa;color:#333333;}
#lb8,#nkm8{background-color:#ffffff;color:#000000;}
--></style>
<div class="divbox">
<input id="rdb1" checked="checked" name="rdb" type="radio" />
<input id="rdb2" name="rdb" type="radio" />
<input id="rdb3" name="rdb" type="radio" />
<input id="rdb4" name="rdb" type="radio" />
<label id="lb1" for="rdb1">タブ１</label><label id="lb2" for="rdb2">タブ２</label><label id="lb3" for="rdb3">タブ３</label><label id="lb4" for="rdb4">タブ４</label>
<div id="nkm1">タブ１に対応する文章</div>
<div id="nkm2">タブ２に対応する文章</div>
<div id="nkm3">タブ３に対応する文章</div>
<div id="nkm4">タブ４に対応する文章</div>
</div>
<p> </p>
<p> </p>
<p> </p>
<div class="divbox">
<input id="rdb5" checked="checked" name="rdb2" type="radio" />
<input id="rdb6" name="rdb2" type="radio" />
<input id="rdb7" name="rdb2" type="radio" />
<input id="rdb8" name="rdb2" type="radio" />
<label id="lb5" for="rdb5">タブ１</label><label id="lb6" for="rdb6">タブ２</label><label id="lb7" for="rdb7">タブ３</label><label id="lb8" for="rdb8">タブ４</label>
<div id="nkm5">タブ１に対応する文章</div>
<div id="nkm6">タブ２に対応する文章</div>
<div id="nkm7">タブ３に対応する文章</div>
<div id="nkm8">タブ４に対応する文章</div>
</div>

赤文字部分が追記部分です。

途中、

<p> </p>
<p> </p>
<p> </p>

の部分はあってもなくても構いません。

この部分に他の文章を普通に挟める、という事を明示するために入れておきました。

２つめのタブ切り替えの、タブと中身の色、および文字色を指定しているのは、

#lb5,#nkm5{background-color:#000000;color:#ffffff;}
#lb6,#nkm6{background-color:#333333;color:#aaaaaa;}
#lb7,#nkm7{background-color:#aaaaaa;color:#333333;}
#lb8,#nkm8{background-color:#ffffff;color:#000000;}

の部分です。

色は自由に別の色を指定できます^^

じゃあ、３つ使いたくなったら？

…^^;;;;;

また更にコピペして、idとnameを書き換える事になります。

一応、参考までに今回行った事を書いてみますね。 

元のコード

<style><!--
.divbox{position:relative;}
#lb1,#lb2,#lb3,#lb4{position:relative;top:8px;padding:0px 10px;border-width:1px;border-color:black;border-style:solid solid none solid;border-radius:8px 8px 0px 0px;z-index:1;transition:0.2s ease-out 0s;}
#rdb1,#rdb2,#rdb3,#rdb4{display:none;}
#nkm1,#nkm2,#nkm3,#nkm4{display:none;position:relative;padding:8px;width:100%;border-radius:0px 8px 8px 8px;border:1px solid black;z-index:0;}
#rdb1:checked~#lb1,#rdb2:checked~#lb2,#rdb3:checked~#lb3,#rdb4:checked~#lb4{top:10px;}
#rdb1:checked~#nkm1,#rdb2:checked~#nkm2,#rdb3:checked~#nkm3,#rdb4:checked~#nkm4{display:block;}
#lb1,#nkm1{background-color:#ffdddd;}
#lb2,#nkm2{background-color:#ddffdd;}
#lb3,#nkm3{background-color:#ddddff;}
#lb4,#nkm4{background-color:#ffffdd;}
--></style>
<div class="divbox">
<input id="rdb1" checked="checked" name="rdb" type="radio" />
<input id="rdb2" name="rdb" type="radio" />
<input id="rdb3" name="rdb" type="radio" />
<input id="rdb4" name="rdb" type="radio" />
<label id="lb1" for="rdb1">タブ１</label><label id="lb2" for="rdb2">タブ２</label><label id="lb3" for="rdb3">タブ３</label><label id="lb4" for="rdb4">タブ４</label>
<div id="nkm1">タブ１に対応する文章</div>
<div id="nkm2">タブ２に対応する文章</div>
<div id="nkm3">タブ３に対応する文章</div>
<div id="nkm4">タブ４に対応する文章</div>
</div>

の、青文字にした部分がCSSの指定で、オレンジ文字の部分が実際に表示されるタブ切り替えの部分です。

これをそれぞれ、コピーして、続けてペーストします。

この時点でほぼコード量が２倍に！ｗ

そして、２つめになったほうの#がついているもの… #nkm1 とか #rdb1 とか #lb1 とかを全て末尾の数字部分を+4しました！

例えば#nkm1は#nkm5に、#rdb3は#rdb7に、といった具合です。

（別のidであればなんでもいいのですが、指定箇所も多いので統一ルールで行いました。）

そして、オレンジ文字部分のほうの 

name="rdb"

４つ入っていますが、それらを安直に

name="rdb2"

としました。

以上で、タブ切り替えを２つ、同じページに置いて干渉せずに動作させる事ができます。

最後のついでに、２つめのタブ切り替えの方の色指定を変更してみました。

あとがき

コードをなるべく短くしよう、という方向で書いたCSSでしたが、こういう時の修正はちょっと面倒になっちゃいましたね^^;

クラス指定も織り交ぜて使うとちょっとマシだったかも…？

ってなとこで、今回はこのへんで！

次回もまた、よろしくお願いします^^