jQueryを使わずにタブ切り替えをjsで実装する

Yukimi Sato 1,480views 更新:2014年7月15日

こちらのページを参考にしました。
http://hyper-text.org/archives/2007/09/javascript_tab.shtml

HTML

    <div id="javascript_tab_sample">

    <ul id="tab">
    <li class="selected"><a href="#w3c">W3C</a></li>
    <li><a href="#xhtml">XHTML</a></li>
    <li><a href="#css">CSS</a></li>
    </ul>

    <dl id="w3c">
    <dt>World Wide Web Consortium</dt>
    <dd>
    <p>...</p>
    </dd>
    </dl>

    <dl id="xhtml">
    <dt>XHTML</dt>
    <dd>
    <p>...</p>
    </dd>
    </dl>

    <dl id="css">
    <dt>Cascading Style Sheets</dt>
    <dd>
    <p>...</p>
    </dd>
    </dl>

    </div>

js

/*--setup--*/
window.onload=function() {
tab.setup = {
tabs: document.getElementById('tab').getElementsByTagName('li'),
pages: [
document.getElementById('w3c'),
document.getElementById('xhtml'),
document.getElementById('css')
]
}
tab.init();
}
/*--setup end--*/

var tab = {
init: function(){
var tabs = this.setup.tabs;
var pages = this.setup.pages;

for(i=0; i<pages.length; i++) {
if(i !== 0) pages[i].style.display = 'none';
tabs[i].onclick = function(){ tab.showpage(this); return false; };
}
},

showpage: function(obj){
var tabs = this.setup.tabs;
var pages = this.setup.pages;
var num;

for(num=0; num<tabs.length; num++) {
if(tabs[num] === obj) break;
}

for(var i=0; i<pages.length; i++) {
if(i == num) {
pages[num].style.display = 'block';
tabs[num].className = 'selected';
}
else{
pages[i].style.display = 'none';
tabs[i].className = null;
}
}
}
}

注意点

現在開いているタブにはクラス「selected」がつきますが、こちらは他のクラスが入っていても「selected」のみに上書きしなおしてしまいます。

js読み込み時に非表示のタブがアクティブになってしまうことがあります。

 

ここらへんはまた別の機会に調整をしたいと思っています。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません