CSSで作ったタブを切り替える

Webサイトのお知らせなどのカテゴリが複数ある時は、タブを切り替えて表示させるのが一般的かと思います。

今回はCSSで作ったタブを、jqueryを使用して切り替える方法をご紹介いたします。

サンプル

まずはサンプルをご覧ください。

サンプル

ソースと解説

ソースはjs、html、cssの3つとなります。

js

「#tab」の「li」をクリックしたときにタブとタブの配下にある内容を切り替えています。

「addClass」と「removeClass」により「select」のクラスを加える、または取り去り、タブについている「▼(逆三角形)」の非表示を行っています。

html

タブとタブの内容に分かれています。

タブの部分です。

タブの内容部分です。

css

デフォルトの打ち消しと、タブ、タブの内容部分、フロートをサポートするクリアフィックスの部分に分かれます。

デフォルトのスタイルを打ち消しています。

タブの基本プロパティです。

タブ1からタブ4の色を指定しています。色はCSS3で「CSS3のグラデーションのプロパティを生成する Ultimate CSS Gradient Generator」の記事で紹介した「Ultimate CSS Gradient Generator」で作りました。

「li」の「:before」疑似要素でタブの「▼(逆三角形)」を表現しています。

タブの内容を装飾しています。「.box.d_none」はタブの内容の非表示ように使用しています。

タブの「li」をフロートしているので、「clearfix」で高さを整えています。

全ソース

jqueryは「jquery-1.11.3.min.js」を使用しています。

まとめ

  • ソースはjs、html、cssの3つ。
  • 「addClass」と「removeClass」により「select」のクラスを加える、または取り去り、タブについている「▼(逆三角形)」の非表示を行っている。
  • タブの色はCSS3で表示。
  • 「li」の「:before」疑似要素でタブの「▼(逆三角形)」を表現。
  • 「clearfix」でフロートによる高さを整えている。
  • jqueryは「jquery-1.11.3.min.js」を使用。

。タブの表示に関してはCSS3で表現しているので、比較的新しいブラウザに限定されます。

今回は行いませんでしたが、タブの保持なども「jquery.cookie.js」を使えば容易に行うことができます。

スポンサーリンク
記事のタイトルとURLをコピーする

シェアする

フォローする

CSSで作ったタブを切り替える
この記事をお届けした
PC ウェブログの最新ニュース情報を、
いいねしてチェックしよう!