こんにちは。前回から引き続き，
基本のタブメニュー
ウェブアプリでよく使われるインタフェースのひとつ，
タブメニューの基本HTML
<div class="js-tabs">
<ul id="tab_menu1" class="tab_menu">
<li><a href="#page1-1">Page 1</a></li>
<li><a href="#page1-2">Page 2</a></li>
<li><a href="#page1-3">Page 3</a></li>
</ul>
<div id="tab_content1" class="tab_content">
<div id="page1-1" class="page">
Page 1
</div>
<div id="page1-2" class="page">
Page 2
</div>
<div id="page1-3" class="page">
Page 3
</div>
</div>
</div>そして，
タブメニューの基本CSS
.js-tabs ul.tab_menu{
list-style-type:none;
margin:0px;
padding:0px;
}
.js-tabs ul.tab_menu li{
display:inline;
background:#666;
margin:0px;
padding:2px;
}
.js-tabs .tab_menu li a{
padding:3px;
}
.js-tabs .tab_menu li a:link,
.js-tabs .tab_menu li a:visited{
background-color:#666;
color:#fff;
}
.js-tabs .tab_menu li a.active:link,
.js-tabs .tab_menu li a.active:visited{
background-color:#444;
color:#fff;
}
.js-tabs .tab_menu li a:hover{
background-color:#333;
color:#f0f;
}
.tab_content{
position:relative;
height:200px;
}
.tab_content div.page{
width:450px;
height:200px;
position:absolute;
color:#222;
}
#page1-1{
background-color:#ffa;
}
#page1-2{
background-color:#faf;
}
#page1-3{
background-color:#aff;
}さて，
タブメニューの基本JavaScript
(function(){
var menu = document.getElementById('tab_menu1');
var content = document.getElementById('tab_content1');
var menus = menu.getElementsByTagName('a');
var current; // 現在の状態を保持する変数
for (var i = 0, l = menus.length;i < l; i++){
tab_init(menus[i], i);
}
function tab_init(link, index){
var id = link.hash.slice(1);
var page = document.getElementById(id);
if (!current){ // 状態の初期化
current = {page:page, menu:link};
page.style.display = 'block';
link.className = 'active';
} else {
page.style.display = 'none';
}
link.onclick = function(){
current.page.style.display = 'none';
current.menu.className = '';
page.style.display = 'block';
link.className = 'active';
current.page = page;
current.menu = link;
return false;
};
}
})();タブを切り替えるには，
なお，
上記コードにおいて，
つまり，
クロージャーと関数
function (){
var current;
function (){ // #1
var page, link;
function(){
// onclick
}
}
function (){ // #2
var page, link;
function(){
// onclick
}
}
function (){ // #3
var page, link;
function(){
// onclick
}
}
}変数pageとlinkがそれぞれ3つ存在する点がポイントです。
クロージャーの復習はこれくらいにして，
機能的には問題ありませんが，
これを回避する方法はいくつかあり，
または，
というわけで，
タブメニューの基本HTML
<div class="js-tabs">
<ul id="tab_menu1" class="tab_menu">
<li><a href="#page1-1"> Page 1
</a></li><li><a href="#page1-2"> Page 2
</a></li><li><a href="#page1-3"> Page 3
</a></li>
</ul>
<div id="tab_content1" class="tab_content">
<div id="page1-1" class="page">
Page 1
</div>
<div id="page1-2" class="page">
Page 2
</div>
<div id="page1-3" class="page">
Page 3
</div>
</div>
</div>