jQuery

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

More than 3 years have 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>だけ読みこめば大丈夫でした。)