【 jQuery】プラグイン『tabs.js』で簡単にタブ切り替え

【 jQuery】プラグイン『tabs.js』で簡単にタブ切り替え
あのー、簡単にタブを作りたいのですがー
じゃあ、プラグインを使って簡単に作ってみましょう

簡単にタブを作ってみる(プラグイン使用)

See the Pen 【 jQuery】プラグインのtabs.jsを使って簡単にタブ切り替えをしてみる by 125naroom (@125naroom) on CodePen.

HTML

<div id="tabs">
    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
        <li>E</li>
    </ul>
    <div>
        <p>タブ-A-です。</p>
    </div>
    <div>
        <p>タブ-B-です。</p>
    </div>
    <div>
        <p>タブ-C-です。</p>
    </div>
    <div>
        <p>タブ-D-です。</p>
    </div>
    <div>
        <p>タブ-E-です。</p>
    </div>
</div>

CSS

/*=========
わかりやすくホバーだけ追加してます(他はプラグインのまま)
=========*/
.tabs-nav li:hover {
  background-color: #ffdfdf;
  border: 1px solid #999;
  border-bottom: none;
}

jQuery

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tabs.js"></script>
$(document).ready( function() {
  tabify( '#tabs' );
});

複数設置したい場合は?

複数設置したい場合は、jQueryの記述を2個、3個と追加する必要があります。
HTMLのIDの紐付けも忘れずに。

See the Pen 【 jQuery】プラグインのtabs.jsを使って簡単にタブ切り替えをしてみる(複数設置) by 125naroom (@125naroom) on CodePen.

HTML

<div id="tabs1">
    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
        <li>E</li>
    </ul>
    <div>
        <p>タブ-A-です。</p>
    </div>
    <div>
        <p>タブ-B-です。</p>
    </div>
    <div>
        <p>タブ-C-です。</p>
    </div>
    <div>
        <p>タブ-D-です。</p>
    </div>
    <div>
        <p>タブ-E-です。</p>
    </div>
</div>
<div id="tabs2">
    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
        <li>E</li>
    </ul>
    <div>
        <p>タブ-A-です。</p>
    </div>
    <div>
        <p>タブ-B-です。</p>
    </div>
    <div>
        <p>タブ-C-です。</p>
    </div>
    <div>
        <p>タブ-D-です。</p>
    </div>
    <div>
        <p>タブ-E-です。</p>
    </div>
</div>

CSS

/*=========
わかりやすくホバーだけ追加してます(他はプラグインのまま)
=========*/
.tabs-nav li:hover {
  background-color: #ffdfdf;
  border: 1px solid #999;
  border-bottom: none;
}

jQuery

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tabs.js"></script>
$(document).ready( function() {
  tabify( '#tabs1' );
  tabify( '#tabs2' );
});

『tabs.js』のダウンロード

『tabs.js』に必要なファイルは下記サイトからダウンロードできます。

メモ

jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるのをおすすめします。

さいごに

わー、簡単だー
デザインを変えたい場合はCSSを追加していけばオッケーですよー

関連記事

Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

4

/

14

2024

Googleさんの
おすすめ

4

/

14

2024

デザインの記事

TALKING CITY|柏の葉イノベーションフェス2023
5年経った無印良品窓の家
【jQuery】 ローディング、実装サンプル集