【jQuery】プラグインなしでコンテンツを切り替えるタブメニューを作る

公開日: : 最終更新日:2016/09/05 jQuery

tabmenu_img

並んだタブをクリックすると、そのすぐ下のボックス内のコンテンツが切り替わります。タブはスマートフォンでも動作しますが、どちらかといえばPC向けのUIです。

<ul class="tab">内の<li>を増やしたり減らしたりすることで、タブの増減が可能です。表示するコンテンツの<div>内は自由にHTMLを組むことができます。テキストだけでなく画像を使うこともでき、CSSでレイアウトも自由に組めます。

サンプル

See the Pen zBZKXJ by kajico (@kajilabo) on CodePen.

設置方法

1. jQueryを読み込む

HTMLファイルの<head>~</head>内に下記を記述します。

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script>
$(function() {
    $('.tab li').click(function() {
        var index = $('.tab li').index(this);
        $('.tab-contents div').css('display','none');
        $('.tab-contents div').eq(index).css('display','block');
        $('.tab li').removeClass('select');
        $(this).addClass('select')
    });
});
</script>

もしくは、<head>~</head>内に

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="js/custom.js"></script>

と記述し、外部の任意のjsファイルに、

$(function() {
    $('.tab li').click(function() {
        var index = $('.tab li').index(this);
        $('.tab-contents div').css('display','none');
        $('.tab-contents div').eq(index).css('display','block');
        $('.tab li').removeClass('select');
        $(this).addClass('select')
    });
});

を追記する。

2. HTMLファイルに書き込む

HTMLファイルのタブメニューを設置したい部分に書き込みます。

<ul class="tab">
    <li class="select">タブ1</li>
    <li>タブ2</li>
    <li>タブ3</li>
</ul>
<div class="tab-contents">
    <div>あめんぼ あかいな アイウエオ<br>うきもに こえびも およいでる
</div>
    <div class="hidden">かきのき くりのき カキクケコ<br>きつつき こつこつ かれけやき
</div>
    <div class="hidden">ささげに すをかけ サシスセソ<br>そのうお あさせで さしました
</div>
</div>

3. cssファイルに書き込む

cssファイルに記述します。

ul,li {
  margin: 0px;
  padding: 0px;
}
.tab {
  overflow: hidden;
  border-bottom: 6px solid #b9d5dc;
  margin-top: 30px;
}
.tab li {
  background: #bbb;
  float: left;
  margin-right: 5px;
  color: #FFF;
  list-style-type: none;
  border-radius: 5px 5px 0 0;
  padding-top: 8px;
  padding-right: 30px;
  padding-bottom: 4px;
  padding-left: 30px;
  cursor: pointer;
}
.tab li.select {
  background: #b9d5dc;
}
.tab-contents div {
  background: #eee;
  padding: 20px;
}
.hidden {
  display: none;
}


関連記事

【jQuery】プラグインなしで縦型のドロップダウンメニューを作る(現在の位置のメニューを開けた状態にする)

『【jQuery】プラグインなしで縦型のドロップダウンメニューを作る』で作ったドロップダウンメニ...

記事を読む

【jQueryプラグイン】FractionSlider:スライダー内の画像やテキストなどの要素に、さまざまな動きをつける

FractionSlider FractionSlider デモ   j...

記事を読む

【jQuery】サムネイルをクリックするとメイン画像が切り替わる

サムネイルをクリックすると、上の大きい画像がサムネイルの画像と切り替わるようにします。 サンプル ...

記事を読む

【jQuery】開閉するボックスを作る

ボタンをクリックすると、隠されたボックスの表示/非表示を切り替えます。CSSプロパティを操作する...

記事を読む

【jQuery】プラグインなしで縦型のドロップダウンメニューを作る

jQueryのプラグインを使わない縦型のドロップダウンメニューの作り方です。CSSを変更すれば、...

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

no image
エコノミークラス症候群

エコノミークラス症候群とは?  エコノミークラス症候群は、旅行に関連

no image
巻き爪・陥入爪

巻き爪・陥入爪ってなに?  巻き爪とは、主に親指の爪の両端が「巻く」

no image
結婚お祝い金

披露宴に出る場合 祝儀袋の渡し方  受付でお祝いの言葉を述べ、祝儀

no image
結婚祝い

お祝い品選びと費用 お祝い品の選び方  新居を構える二人には、生活

no image
ダニ除去マニュアル

ダニ除去マニュアルについて  基本的なダニアレルゲン対策としては、

→もっと見る

PAGE TOP ↑