jQuery でタブを実装してみよう!

皆さまこんにちは!
暑さ寒さも彼岸まで。ようやく過ごしやすい季節になってまいりましたね!スポーツの秋、読書の秋、色々な秋がありますが、私はやはり「食欲の秋」でしょうか(笑)
さて本日は勉学の秋、jQueryとcssを連携させて、タブでページを切り替えて表示させてみようと思います。

今回作ってみるもの↓
jq-tab

jQueryの本体を読み込む

まずは簡単なhtmlファイルを作っておきます。
今回は4つのタブを作りますので、bodyの下にsectionを4つ作ります。その4つのsectionを一つのdivで囲み、id=”j-tab”としておきます。pタグの中には適当にダミーテキストを入れておきます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>tabをjQueryで実装してみよう!</title>
</head>
<body>
  <h1>tabをjQueryで実装してみよう!</h1>
  <div id="j-tab">
    <section>
      <h1 class="selected">page1</h1>
      <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
      </div>
    </section>
    <section>
      <h1>page2</h1>
      <div>
        <p>Vestibulum ante ipsum primis in faucibus orci luctus.</p>
      </div>
    </section>
    <section>
      <h1>page3</h1>
      <div>
        <p>Donec cursus odio vitae quam interdum, vitae vestibulum dolor luctus.</p>
      </div>
    </section>
    <section>
      <h1>page4</h1>
      <div>
        <p>Vivamus venenatis sapien elit, id aliquam libero ullamcorper in.</p>
      </div>
    </section>
  </div>
</body>
</html>

それでは、jQueryを読み込ませてみましょう。
まず、bodyの閉じタグ</body>の直前にscript要素を作ります。

jQueryを利用するにはjQueryライブラリを読み込ませる必要があります。その際、CDN(コンテンツ・デリバリー・ネットワーク)を利用したほうが、キャッシュを活用することでページの読み込みの高速化も期待できますので、CDNで指定します。

jQueryCDN で検索すると、jQuery本家やgoogleから提供されているものがあります。どれでも良いのでリンクをコピーし、先ほどbodyの閉じタグ</body>の直前に作ったscript要素のsrc=” “内にペーストします。

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

●CDNのリンク

その下にjQueryの命令を書くためのscript要素をもう一つ作り、最初に下記の1行を書きます。

$(function(){ });

この { } 内に命令文を書いていきます。命令文はいくつあっても続けて書いていって構いません。ただし、ひとつの命令が終わったら必ず末尾に ; を付けて、命令文を完結させましょう。

こんな感じになります ↓

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
  $(function(){
 //この中にjQueryの命令文を書く
 });
 //script要素はbodyの閉じタグの直前に入れる
</script>
</body>
</html>

では初めに、jQueryの本体が読み込まれているかどうかを確認するために、{ }内に

alert(0);

と書いてみます。

alert

ページをリロードして画面に上のようなアラートが出ましたら、きちんと読み込まれていますので、//でコメントアウトしておきます。

アラートが出なかった場合は、firebugなどの開発ツールを使ってコンソールでエラーが出ていないかチェックしてみましょう。
;のつけ忘れや(){} の閉じ忘れ、又は入れ子になっていない、などがエラーの大半ですので間違い探しをしてみよう(^^)

jQueryでcssのクラスを追加してみよう

無事jQueryが読み込めましたら、次はjQueryで要素にクラスを追加してみます。

普通はhtmlの各要素にclass=” “でクラス名を付けますが、「jQueryを読み込んだ時にクラスを追加する」という命令文を書いてみます。ここではid、j-tabにtabedというクラスを付けてみます。

jQueryの文法の基本は、主語(セレクタ)と動詞(メソッド)です。動詞はセレクタに.(ドット)で続けて書きます。
今回使うclassを追加するメソッドはaddClass()です。

では{ }内に

$(“#j-tab”).addClass(‘tabed’);

と書いてみます。これを訳すと id=”j-tab”に、class=”tabed”を追加せよ となります。

メソッドに関しては、jQueryメソッド などで検索すると色々見つかります。下記のサイトも参考にしてみてください。
●qiita
●ヌー

firebugなどで要素を調査して確認してみてください。きちんと書けていればid、j-tabを付けたdivに新たにクラスtabedが追加されているはずです。

style要素にjQueryを読み込む前と読み込み後のcssを書く

では次に、head内にstyle要素を作ってcssでjQueryを読み込んだ時の見た目をデザインしていきます。
jQueryで追加するcssには、混同しないためにクラス名の接頭辞に「j−」を付けました。

<style>
body{
  font-size:1.2em;
  line-height:1.2em;
  color:#444;
  margin: 0 15%;
}

p {
  margin: 1em;
  background-color:#fafafa;
  padding:1em;
}

p:first-letter {
  font-weight:bold;
  font-size:3em;
}

h1 {
  background-color: #eee;
  padding: 0.6em;
  border-radius:0.2em;
  line-height:1.2em;
}

.j-h1 {
  color: #fff;
  background-color: #3F70DB;
}

.tabed {
  position: relative;
}

.tabed section {
  display: inline-block;
}

.tabed .j-h1 {
  position: relative;
  margin: 0;
  padding: 0.5em 0.5em 1em;
  display: inline-block; /* 要素を横並びにする */
  font-size:1em;
  line-height: 1;
  border-radius: 0.5em 0.5em 0 0;
  color: #ccc;
  background-color: #7396E7;
  cursor: pointer;
  transition: 0.2s;
}

.tabed > section > div {/*  > (子セレクタ).tabedの直下のsectionの直下のdivにstyleを適用 */
  position: absolute;
  left: 0;
  top: 2em;
  background-color: #B4C7F2;
  padding: 1em;
  display: none; /* jQueryでクラスselectedが付いていないものはdisplayされない */
  border-bottom: 2em solid #fff;
}

.tabed .j-h1:hover,
.tabed .selected {
  color: #fff;
  background-color: #B4C7F2;
  top: -0.3em;
}

.tabed .selected + div {/*  + (隣接セレクタ).tabed .selectedに隣接しているdivにstyleを適用 */
  z-index: 100;
  display: block;
}
  </style>

タブクリックでページが切り替わって表示されるためのjQueryを書く

それではクリックされたタブが表示されるよう、jQueryを書いてみます。ここで使用するメソッドは addClassremoveClass の二つです。ポイントは、

  • $(“h1”).addClass(‘j-h1’)に.(ドット)で続けて、click(function() {… でメソッドを書き加えている
  • メソッドremoveClassで、クリック時にクラスselectedが付いているものからはクラスselectedを取り除く
  • クラスselectedが取り除かれた後、今イベントが起きている要素$(this)にはクラスselectedを付け加える
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
  $(function(){
    //ここからjQueryの命令文を書く
    //alert(0);
    $("#j-tab").addClass('tabed');//#j-tabにtabedというクラスを付け加える。
    $("h1").addClass('j-h1').click(function() {
      $(".selected").removeClass('selected');/*h1にj−h1というクラスを付け、更に
       クリック時にselectedのクラスが付いているものからは、selectedのクラスを取り除く*/
      $(this).addClass('selected');//今クリックされているものにのみ、クラスselectedを付け加える。
    });;
    //ここまでjQuery
  });
  </script>

「クリック」というイベント発生時にjQueryの命令でクラスを切り替え、クラスselectedを外したものは display:none で表示されないようにし、クラスselectedを付加されたものは display:block で表示される、という風にcssとjQueryを連携させています。

まとめ

完成〜!
●jQuery読み込み後
タブで切り替わるようになりました。

ブラウザによってはjQueryが読み込めないこともありますので、その場合でも表示できるようにしておきましょう。
●jQuery読み込み前

プログラミングは難しい〜(><);;と思ってしまいがちですが、何か一つでも習得すれば、他の言語も理解するのに時間がかからないとか?!
千里の道も一歩から!まずは、こんなことがサイト上で出来たらいいな、を形にすることから始めてみましょう♪

私は今までプラグインに頼っていたことを、これからは自力でコードを書くことから始めてみようと思います!
それでは次回まで、ごきげんよう(^^)ゞ

コメントを残す