BLOG ENTRY
たとえばpurevolumeのアーティストページで使われているようなjavascriptとcssを使ったタブ切替えを行う。
（とりあえず装飾は最低限で。）
サンプルソースコードダウンロード
まず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>
-
<!-- /タブ内部終了▲ -->
次にCSS部分。
-
<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>
で、javascript部分。
-
<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>
終わり。
comments(0)
DATE2008.08.15