JavaScript > snippet

タブの切り替え。 リロードしたときに選択したいたタブを表示する。

by s_hiroshi

HTML

<ul id="tab-nav">
    <li id="tab-nav1" class="active"><a href="#tab1">item1</a></li>
    <li id="tab-nav2"><a href="#tab2">item2</a></li>
    <li id="tab-nav3"><a href="#tab3">item3</a></li>
</ul>
<div style="padding: 10px margin: 10px; background: #EEE;">
    <div id="tab1" class="tab">pane1</div>
    <div id="tab2" class="tab">panel2</div>
    <div id="tab3" class="tab">panel3</div>
</div>

CSS

#tab-nav {
    overflow: hidden;
}
#tab-nav li {
    float: left;
    padding: 5px;
    border: 1px solid #EEE;
   cursor: pointer;
}
#tab-nav li.active {
    background: #DDD;
}
.tab {
    display: none;
}
#tab1 {
    display: block;
}

JavaScript

var navList = $('#tab-nav li');

// クリックイベントのコールバック関数
var clickHandler = function(i) {
    return function() {
        var parts = $('.tab'),
            length = parts.length,
            k;
        for (k = 0; k < length; k++) {
            if (i === k) {
                // activeクラスをタブメニューに設定
                $(navList.get(k)).addClass('active');
                // タブの表示
                parts.css('display', 'none');
                part = parts.get(k);
                $(part).css('display', 'block');

            } else {
                $(navList.get(k)).removeClass('active');
            }
        }
    };
};

// クライアント用マイページのタブ切替
navList.each(function(i) {
    var callbackfunc = clickHandler(i);
    var listItem = navList.get(i);
    $(listItem).click(callbackfunc);
});

// ページロード時に1回実行
// triggerを使ってタブクリックを発生させる。
var url = document.location.href;
var anchor = url.split('#');
if (anchor[1] !== undefined) {
    var l;
    for (l = 0; l < App.client.length; l++) {
        if (anchor[1] === App.client[l]) {
            $('#tab-nav' + l).triggerHandler('click');
        }
    }
}