jQueryでシンプルなタブ表示を作る

jQueryを使ったタブ表示を作る

jQueryでシンプルなタブ表示を今回は作ってみようかと思います。たったの5行で完成することが出来ます。CSSのチェックボックスを使って、javascriptを使わずにタブ表示は作成することが可能ですが。インプットとラベルを使うのでHTMLが見づらくなってしまいます。javascriptでタブ表示を実装する場合はHTMLが見やすく管理しやすくなります。

今回は、javascriptを簡単に扱えるjQueryを使って作りました

DEMO 表示

ー CODE ー

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>9inebb demo</title>
  <link rel="stylesheet" href="style.css">
  <script src="jquery-1.11.1.min.js"></script>
</head>
<body>
  <div class="tab">
    <div class="tab-btn">
      <div class="btn on">NEWS</div>
      <div class="btn">INFO</div>
      <div class="btn">CONTACT</div>
    </div>
    
    <div class="tab-content">
      <div class="on">
        Lorem
      </div>
      <div>
        Lorem
      </div>
      <div>
        Lorem
      </div>
    </div>
  </div>
</body>
</html>

ボタン部分とそれと対になる内容の部分のHTMLとなっています。初期で表示する物に on というクラス名をつけています。

CSS

body {
  margin: 0;
  padding: 0;
}

.tab {
  width: 500px;
  margin: 100px auto 0;
}

.tab-btn {
  background: #e5e5e5;
  overflow: hidden;
}

.tab .btn {
  float: left;
  width: 33.333%;
  height: 50px;
  line-height: 50px;
  font-size: 25px;
  font-family: impact;
  box-sizing: border-box;
  padding: 0 10px;
  text-align: center;
  cursor: pointer;
}

.tab-content {
  box-sizing: border-box;
  border: 2px solid #000;
  padding: 15px;
  font-size: 12px;
  font-family: impact;
  color: #555;
}

.tab-content > div {
  display: none;
}

.tab .btn.on {
  background: #000;
  color: #fff;
}

.tab .tab-content > div.on {
  display: block;
}

CSSでは、onがついてない場合はコンテンツは表示されないようにして display: hidden; としてあります。クラス on がつくと、 display: block; になって表示されるようになります。タブ名の方は、背景の色と文字の色がonがあるときと無いときでアクティブであるかどかを表すようにしています。クラス名 on は両方で使われていますが、セレクタの指定で親につづいてクラスを指定することでそれぞれ違うスタイルを当てています。

javascript （jQuery）

<script>
  $('.btn').on('click',function(){
    $('.btn , .tab-content div').removeClass('on');
    $(this).addClass('on');
    $('.tab-content div').eq($(this).index()).addClass('on');
  });
</script>

jQueryを使ったスクリプトです。クリックをトリガーに動作をします。クリックされると、クラス on がタブ名、コンテンツ両方から削除されます、その次にクリックしたタブ（要素）にonクラスが付くようにします $(this).addClass('on'); というところです。最後に、クリックされたタブが、何番目かを $(this).index() で取得し、 eq() にて同じ番数のコンテンツにクラス on を付くようにします。これで完了です。

index() は同じ階層のHTMLの中で何番目かを取得するものです。

eq() は同じ階層のHTMLの中で何番目を操作するかを指定するものです。