简易选项卡 js版

简易选项卡 js版

by xiaobai

HTML

<div id="outer">
    <ul id="tab">
        <li>第一课</li>
        <li>第二课</li>
        <li>第三课</li>
    </ul>
    <div id="content">
        <ul>
            <li>第一课</li>
            <li>第一课</li>
            <li>第一课</li>
            <li>第一课</li>
            <li>第一课</li>
        </ul>
        <ul>
            <li>第二课</li>
            <li>第二课</li>
            <li>第二课</li>
            <li>第二课</li>
        </ul>
        <ul>
            <li>第三课</li>
            <li>第三课</li>
        </ul>
    </div>
</div>

CSS

body,ul,li{margin:0;padding:0;}
    body{font:12px/1.5 Tahoma;}
    #outer{width:450px;margin:10px auto;}
    #tab{overflow:hidden;zoom:1;background:#000;border:1px solid #000;}
    #tab li{float:left;color:#fff;height:30px;cursor:pointer;line-height:30px;list-style-type:none;padding:0 20px;}
    #tab li.current{color:#000;background:#ccc;}
    #content{border:1px solid #000;border-top-width:0;}
    #content ul{line-height:25px;display:none;margin:0 30px;padding:10px 0;}

JavaScript

/*三个参数 tab content 默认的第几项*/

function setTab(tab, tabcnt, k) {
    var oLi = document.getElementById(tab).getElementsByTagName("li");
    var oUl = document.getElementById(tabcnt).getElementsByTagName("ul");
    oLi[k].className = "current";
    oUl[k].style.display = "block";
    for (var i = 0, len = oLi.length; i < len; i++) {
        oLi[i].index = i;
        oLi[i].onclick = function() {
            for (var n = 0, len = oLi.length; n < len; n++) {
                oLi[n].className = "";
            }
            this.className = "current";

            for (var n = 0, len = oUl.length; n < len; n++) {
                oUl[n].style.display = "none";
            }
            oUl[this.index].style.display = "block";
        };
    }
}
setTab("tab", "content", 2);