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

j
このエントリーをはてなブックマークに追加
PR

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の中で何番目を操作するかを指定するものです。

PR

COMMENT

  1. 通りすがりの匿名

    div tab-contentのdiv(本文)にさらにdiv要素があるとインデックスがズレて本文が表示されなくなることがありますね。

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)