« utf-8のMTBlogのcssがIE6で上手く読み込まれない | メイン | webメールのアドレス帳を使ってスパムメールを送るSNS »
2008年10月10日
CSSとJavaScriptで本文HTMLをタブ切り替え
タブで切り替えて、同一HTML内のコンテンツを切り替える方法として、
たつをさんのページのスクリプト
≫ CSS と JavaScript でタブ切り替え
を参考に構築していたのですが、ページのフッターの下に謎の余白が・・・。
いろいろなサイトを見ていたら、コンテンツの表示・非表示にvisibilityを使っているのが原因のようだったので、下記の太線箇所を、displayに変更。
------------------------------------------
function seltab(bpref, hpref, id_max, selected) {
if (! document.getElementById) return;
for (i = 0; i <= id_max; i++) {
if (! document.getElementById(bpref + i)) continue;
if (i == selected) {
document.getElementById(bpref + i).style.display = "inline";
document.getElementById(bpref + i).style.position = "";
document.getElementById(hpref + i).className = "open";
} else {
document.getElementById(bpref + i).style.display = "none";
document.getElementById(bpref + i).style.position = "absolute";
document.getElementById(hpref + i).className = "close";
}
}
}
--------------------------------------------------------------
とりあえず、IE6,7,FF3,Safari3で動作確認済み。
タブに使うul,liタグもCSSで画像化出来、ソースもあまり複雑でないので、使いまわしの利きそうな技です。
投稿者 yossy : 2008年10月10日 13:21
トラックバック
このエントリーのトラックバックURL:
https://www.tetsuya.yoshida.name/cms/mt-tb.cgi/225