ひとつ前に書いた記事のやり方だと、ie6でエラーが出たので、修正しました。
htmlは、<div>タグをひとつ追加
<div id="flip-tabs"> <ul id="flip-navigation"> <li><a href="javascript:void(0)" id="tab-0">Recent</a></li> <li><a href="javascript:void(0)" id="tab-1">Popular</a></li> <li><a href="javascript:void(0)" id="tab-2">Comments</a></li> </ul> <div id="rel"> <div id="flip-container"> <div> PutPut Content for first tab </div> <div> Put Content for second tab here </div> <div> Put Content for third tab here </div> </div> </div> </div>
cssは、一項目追加
@charset "utf-8";
#flip-tabs{
width:300px;
margin:20px auto; position:relative;
}
#rel{
position:relative;
}
#flip-navigation{
margin:0 0 10px; padding:0;
list-style:none;
}
#flip-navigation li{
display:inline;
}
#flip-navigation li a{
text-decoration:none; padding:10px;
margin-right:0px;
background:#f9f9f9;
color:#333; outline:none;
font-family:Arial; font-size:12px; text-transform:uppercase;
}
#flip-navigation li a:hover{
background:#999;
color:#f0f0f0;
}
#flip-navigation li.selected a{
background:#999;
color:#f0f0f0;
}
#flip-container{
width:300px;
font-family:Arial; font-size:13px;
}
#flip-container div{
background:#f00;
}
JSは、若干追加
$(function(){
// initialize quickflip
$('#flip-container').quickFlip();
$('#flip-navigation li a').each(function(){
$(this).click(function(){
$('#flip-navigation li').each(function(){
$(this).removeClass('selected');
});
$(this).parent().addClass('selected');
// extract index of tab from id of the navigation item
var flipid=$(this).attr('id').substr(4);
// Flip to that content tab
$('#flip-container').quickFlipper({ }, flipid, 1);
return false;
});
var cont_style = $("#flip-container").attr("style");
var div_attr = $("#flip-container div").attr("style");
var komozi = div_attr.toLowerCase();
var div_attr_arr = komozi.split("height");
var style_tuika = cont_style + " height " + div_attr_arr[1];
$("#flip-container").attr("style",style_tuika);
$("#rel").attr("style", "height" + div_attr_arr[1]);
});
各々、赤字の部分が変更点です。
プラグインで動的に付加してくれている、div#flip-containerのstyle属性のposition:relative;が、ie6では、無視されるらしい…
って事で、新たにdiv#relを追加して、cssで、position:relative;を指定しています。
JSの方は、なぜか、ie6の場合、style属性を取得すると、全部大文字で取得されちゃいました。（marginじゃなくてMARGIN…こんな感じでした）
なので、一度toLowerCase();で小文字に変換しています。
後、新しく追加したdiv#relに、style属性のheightを指定しています。
お願いだから、これ以上バグ出ないで…
Comments