タブの切り替え方: JQuery + CSS + html の書き方 #JavaScript

タブの切り替える方法を実現するために、やり方のメモです。

※普通の場合、html, js, cssはそれぞれのファイルに書きますが、
実際に１つのファイルだけで、確認できるために、html + JQuery + CSS を１つのファイルまとめて書いてみました。

■内容のポイント

CSS でタブの表示
Jqueryタブの切り替え　参考：誰でも出来る！プラグインを使わずにjQueryで実装するタブ切り替え機能！
htmlメソッドを利用して要素配下のHTMLソースを設定
htmlタグ配下のhtml内容設定、表示　参考：要素配下のテキストを取得／設定するには？

headerの部分

1.タブの色を変えるCSS の設定

tabChange.html_(header/css)


<!DOCTYPE html>
<html>
<head>

<style>
.tab{overflow:hidden;}
.tab li{background:#228B22; padding:10px 25px; float:left; margin-right:1px; height:50px;}
.tab li.select{background:#9ACD32;}
.content li{background:#9ACD32; padding:20px;}
.hide {display:none;}
</style>

2.タブを切り替える JQueryの部分。
JQueryを実行できるために、script srcを設定することを忘れないように。

tabChange.html_(header/JQuery_1)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>
$(function() {
    //クリックしたときのファンクションを指定
    $('.tab li').click(function() {

        //クリックされたタブの番号がindex変数に代入
        var index = $('.tab li').index(this);

        //コンテンツを一度すべて非表示
        $('.content li').css('display','none');

        //クリックされたタブと同じindex番号のコンテンツを表示
        $('.content li').eq(index).css('display','block');

        //一度タブについているクラスselectを消し
        $('.tab li').removeClass('select');

        //クリックされたタブのみにクラスselectをつけ
        $(this).addClass('select')
    });
});

3.scriptで、タブ内の要素は、htmlメソッドを使ってソースを設定します。

tabChange.html_(header/JQuery_2)


$(function() {
var result1 = '';
result1 += '<div class="content1">';
result1 += 'Apple';
result1 += '</div>';
$('#content1').html(result1);

var result2 = '';
result2 += '<div class="content2">';
result2 += 'orange';
result2 += '</div>';
$('#content2').html(result2);

var result3 = '';
result3 += '<div class="content3">';
result3 += 'Spring';
result3 += '</div>';
$('#content3').html(result3);

});
</script>

</head>

bodyの部分

4.実際に表示するhtml の部分です。
contentの部分で、< li id=xxx > で、scriptでhtmlメソッドで設定した番号を指定すれば、ソースを反映します。

tabChange.html_(body)


<body>

<ul class="tab">
    <li class="select">Favorite fruit</li>
    <li>Favorite Color</li>
    <li>Favorite Season</li>
</ul>

<ul class="content">
    <li class =" " id = "content1">
　　<li class ="hide" id= "content2" ></li>
    <li class ="hide" id= "content3"></li>
</ul>

</body>
</html

上記4つのパーツを組み合わせれば、OK～～!

実際に conetent をもっと複雑な内容を表現したいですが、
まず、タブの変換ができまして、満足しました... ^^"