【CSS】jQueryで切り替えるシンプルデザインのタブ装飾で下線を表示しないように工夫してみた

だいぶ前ですが、タブ切り替えのスクリプトをjQueryを使って作成しました。

タブのデザインを今風（？）なシンプルなものにしてみようと久々に手を入れようとしたのですが、どうすれば「タブの下の線」を消せば良いのか悩んでしまいました。

試行錯誤した結果を備忘録としてポストします。

シンプルデザインのタブを切り替える

今回作成したもの

↑ したいこと

↑ 完成版のデザイン

以前作成したものは選択したタブに背景色を塗る仕様でしたが、今回は背景色は設定せず、タブの上部を丸くしているデザインとしています。「ニュース」「経済」「エンタメ」「スポーツ」「地域」をそれぞれリストタグで作成し、横並びさせてタブとしています。
選択（クリック）することで、それぞれの内容（テキスト）を表示させる仕様です。

選択したタブの下の線をいかにして表示させないか、というのが今回の命題。

↑ ちなみにこちらは前回作成したデザイン

CSS

以下はタブデザインのCSSです。

ポイントは「li.chose」に設定している "border-bottom: 1px solid #fff;" と "margin-bottom: -1px;" です。
これでクリックされたリストタグのタブを１ピクセル上にずらし、重ねることで下線をいい感じに見えなくしている、という訳です。

寝るほどですね。
解ってしまえば単純な事なのですが、なかなかのアイデアですよね、これ。
発想って大事。

関連するポスト

jQuery Cookie を使ってタブ切り替え状態を保持する方法

【jQuery】タブの切替スクリプトを作成してみました

-HTML,CSS
-css, jquery, タブ, タブ切り替え