タブ切り替えで表示されているタブについては吹き出しをつけたい。

Question

タブ切り替えで表示されているタブについては吹き出しをつけたいです。
イメージとしては、こちらの画像が合致します。

※画像参照元：https://boel.jp/tips/vol86_tabselect.html

まさにこれがやりたいのですが、記事ではこの画像のような吹き出し付きのタブ切り替えの方法の説明ではないので、どうしたら実現できるのでしょうか。

Answer 1

emsさんの提示されているサイトでもタブをクリックすると他のタブの色がグレーになったりしてますよね。

【記事より抜粋】

#tab1:checked ~ .tab_area .tab1_label{background:#fff; color:#000;}

これは、tab1がチェックされた状態のときの見た目を上記のCSSで決めているためです。

したがって吹き出しの表示もここで指定してあげればよいことになります。

またタブはラジオボタンの見た目を変えていることで表現してますので、クリックしたタブのみ checkedとなりCSSにより吹き出しが表示され、他をクリックした場合はラジオボタンの動作としてcheckedが外れ、CSSが適用されないので吹き出しが表示されないことになります。

Comments

[ems]

euledgeさん、できました！ありがとうございました！euledgeさんに本当感謝です。ありがとうございました。

Answer 2

求めるものにドンピシャのものがない場合は、組み合わせて考えてみましょう。

emsさんの提示されているサイトでタブの動きについては問題なく実装できるのではないかと思います。

あとはタブのデザインである吹き出しの実装をなんとかすれば良いので 「タブで吹き出し」ではなく「CSSで吹き出し」のキーワードで探してみればサンプル見つかります。

この2つを組み合わせてあげれば求めるものにたどり着くと思いますよ。

【CSSで吹き出しの参考】
https://www.granfairs.com/blog/staff/use-triangle-with-css

Comments

[ems]

euledgeさん、ありがとうございます。いただいた内容をもとに、再度やってみます。
ちなみに、二つのタブなのですが、隣のタブをクリックするともともとクリックしていたタブのほうの吹き出しは消えるようにしたいです。その参考になるようなものはどうやって調べたらよいのでしょうか。