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'); } } }
<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>
#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; }