QUALL – blog

たとえば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>

終わり。

No related posts.