BLOG ENTRY

javascriptとcssでタブ切替えを行う

tabたとえばpurevolumeのアーティストページで使われているようなjavascriptとcssを使ったタブ切替えを行う。
(とりあえず装飾は最低限で。)
サンプルソースコードダウンロード

まずHTML部分。
[html]
<!– ▼タブ名開始 –>
<div class="tablist">
<span id="tabsel1" class="tab_selector selected" onClick="tabChange(1);">タブA</span>
<span id="tabsel2" class="tab_selector" onClick="tabChange(2);">タブB</span>
<span id="tabsel3" class="tab_selector" onClick="tabChange(3);">タブC</span>
</div>
<!– /タブ名終了▲ –>

<!– ▼タブ内部開始 –>
<div id="tab1" class="tab">
<h1>タブA内部</h1>
</div>
<div id="tab2" class="noshow">
<h1>タブB内部</h1>
</div>
<div id="tab3" class="noshow">
<h1>タブC内部</h1>
</div>
<!– /タブ内部終了▲ –>
[/html]
次にCSS部分。
[html]
<style type="text/css">
<!–
.tablist {
height: 20px;
}

.tab_selector {
border: 1px solid #666666;
border_bottom: none;
padding: 2px 5px;
cursor: pointer;
background: #ffffff;
}
.selected {
background: #dddddd;
}

.tab {
border: 1px solid #666666;
padding: 0px 10px;
display: block;
width: 400px;
}

.noshow {
display: none;
}
–>
</style>
[/html]
で、javascript部分。
[html]
<script type="text/javascript">
//<![CDATA[
function tabChange(tabNo) {
var i;
var tabCount = 3;

/*
* すべてのタブ名とタブ内部を一度非選択にする
*/
for (i = 1; i <= tabCount; i++) {
document.getElementById("tabsel" + i).className = "tab_selector";
document.getElementById("tab" + i).className = "noshow";
}

/*
* 選択されたタブ名とタブ内部を選択状態にする。
*/
//選択されたタブ名のclass属性をtab_selector selectedに変える。
document.getElementById("tabsel" + tabNo).className="tab_selector selected";

//選択されたタブ内部のclass属性をtabに変える。
document.getElementById("tab" + tabNo).className="tab";
}
//]]>
</script>
[/html]

終わり。

WRITE COMMENT


(required)


(required)


(required)

MENU

veltica creative of twitter