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

2022.1.30 更新

皆さまごきげんよう。

本日はjQueryとcssを連携させて、タブでページを切り替えて表示させてみます。

今回作ってみるものはこちら↓

1.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で指定します。

jQuery、CDN で検索すると、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);

と書いてみます。

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

アラートが出なかった場合は、firebugなどの開発ツールを使ってコンソールでエラーが出ていないかチェックしてみましょう。

；のつけ忘れや（）{} の閉じ忘れ、又は入れ子になっていない、などがエラーの大半ですので間違い探しをしてみよう(^^)

2.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が追加されているはずです。

3.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>

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

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

$(“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読み込み前

プログラミングは難しいと思ってしまいがちですが、何か一つでも習得すれば、他の言語も理解するのに時間がかからないとか?!

今までプラグインに頼っていたことを、自力でコードを書いてみる。プログラミング上達の一歩と思って頑張ろうと思います(^^)ゞ

ではまた次回、ごきげんよう。

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

目次

1.jQueryの本体を読み込む

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

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

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

まとめ

いいね:

コメントを残すコメントをキャンセル

目次

1.jQueryの本体を読み込む

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

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

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

まとめ

share!

いいね:

コメントを残すコメントをキャンセル