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

公開日： 2016/08/14 : 最終更新日：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;
}