CSS3 PIE.htc ってメジャーなんだろうか?
http://css3pie.com/
たまたま、これを使ってるサイトの面倒をみてるのだが、Tab コンテンツを作成する場合に、
もしかしたら、jQuery-UI より簡単に利用できるかも。
Tab のサンプルデザインを、http://css3pie.com/demos/tabs/ から持ってくる。
( CSS 長いので、ここでは省略 )
独自のタグ属性 data-pietabid= をタブIDとして、li タグに付与しておく。
<div class="tabBox">
<ul class="tabs">
<li data-pietabid="1"><a href="#">Tab One</a></li>
<li data-pietabid="2"><a href="#">Tab Two</a></li>
<li data-pietabid="3"><a href="#">Tab Three</a></li>
</ul>
<div id="tab-content" class="content">
<p>chrome ローカルテスト時は、--allow-file-access-from-files を指定で起動</p>
</div>
</div>
jQuery 前提の JavaScript で以下のようにする。
<script type="text/javascript">
$(function(){
$('ul[class=tabs]').children().each(function(i, obj){
$(obj).click(function(){
if (typeof($(this).attr('class'))=='undefined'){
$('ul[class=tabs]').children().each(function(j, o){
$(o).removeAttr('class');
});
$(this).attr('class', 'selected');
// コンテンツを入れ替える。
switch($(this).data("pietabid")){
case 1:
$('#tab-content').load("sub/one.html");
break;
case 2:
$('#tab-content').load("sub/two.html");
break;
case 3:
$('#tab-content').load("sub/three.html");
break;
default: break;
}
}
});
});
// 初期表示
$('li[data-pietabid=1]').addClass("selected");
$('#tab-content').load("sub/one.html");
});
</script>
以下のようになる。。。