jQueryでタブを作る方法あれこれ(短いコードで済むやつ・デザイン変更しやすいやつ)

  • 48
    Like
  • 5
    Comment
More than 1 year has passed since last update.

jQueryでタブを作る方法を3つメモします。

  • 1つ目は、短いコードで済むやつ
  • 2つ目は、デザインを変更しやすいやつ
  • 3つ目は、短くかつデザイン弄れる

短いコードで済むやつ

html
<html>
<head>
  <meta charset="utf-8">
  <!-- jQueryとjQueryUIをCDNで読み込む。(ダウンロードしなくていい。) -->
  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>  
  <!-- cssも外部から読み込んでる。 -->
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">

  <!-- スクリプトはこれだけで済む。簡単。 -->
  <script>
  $(function() {
    $( "#tabhoge" ).tabs();
  });
  </script>

</head>
<body>

  <div id="tabhoge">
    <ul>
      <li><a href="#t-1">タブ1</a></li>
      <li><a href="#t-2">タブ2</a></li>
      <li><a href="#t-3">タブ3</a></li>
    </ul>

    <div id="t-1">コンテンツ1</div>
    <div id="t-2">コンテンツ2</div>
    <div id="t-3">コンテンツ3</div>
  </div>

</body>
</html>

下のようなデザインになります。

スクリーンショット 2014-07-13 9.56.04.png

デザイン変更しやすいやつ

別のやり方してみます。3つも外部ファイル読み込まないで、<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>だけを読み込む形でやってみます。

html
<html><head>
  <meta charset="utf-8">
  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

  <style type="text/css">

    /*最初はcont2は表示しないようにしておく。*/
    #cont2 { display: none; }

    /*リストを横並びにして、それっぽくしておく。タブの色を変えておく。*/
    ul { padding: 8px; }
    li { display: inline-block; }
    li#tab1 { background-color: yellow; }
    li#tab2 { background-color: gray; }

  </style>
</head>
<body>

  <ul>
    <li id="tab1"><a href="#cont1">タブ1</a></li>
    <li id="tab2"><a href="#cont2">タブ2</a></li>
  </ul>

  <div id="cont1">コンテンツ1</div>
  <div id="cont2">コンテンツ2</div>

<!-- スクリプトはこの位置(タブとコンテンツの後ろ)に書かないと効かない。。 -->
<script>
  $("#tab1").click(function(){
    $("#cont1").show();
    $("#cont2").hide();

    // タブの色を切り替える。
    $("#tab1").css("background-color", "yellow")
    $("#tab2").css("background-color", "gray")
  });

 $("#tab2").click(function(){
    $("#cont1").hide();
    $("#cont2").show();
    $("#tab1").css("background-color", "gray")
    $("#tab2").css("background-color", "yellow")
  });
</script>

</body></html>

スクリーンショット 2014-07-13 10.45.30.png

デザインは弄りやすいですが、これだと、ちょっとコードが長くなるような気がします。

補足と注意(僕=素人がハマったこと)

html
$("#hogehoge")

なんて書くのが面倒臭ければ、

html
$(hogehoge)

と書いても大丈夫です。

しかし、id名とかをid="tab-2"などと、ハイフンを使っていると$(tab-2)と書くことになり、これは上手くいきません。JavaScriptの変数にはハイフンが使えないことに起因します。
(僕はJSも(もちろんjQueryも)使ったことがないので、そんなところにもハマってしまいました。)

できるだけ短く書いて、デザインもいじるには。

一番目の方法で、外部CSSを読み込まずに、自分で書けば良いだけでした。

(最初、弄っているときは、キャッシュとかのせいで、一番最初の方法は外部ファイル3つ読まないと動かないのかと思ったりしたのですが、別にそんなことはなく、
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>だけ読みこめば大丈夫でした。)