タブの切り替える方法を実現するために、やり方のメモです。
※普通の場合、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 をもっと複雑な内容を表現したいですが、
まず、タブの変換ができまして、満足しました... ^^"