基础 - 选项卡的实现

结构

<div id="weiyi" class="box">
    <div class="order">
        <span>达文西</span><span>末梢血</span><span>华泰强</span><span>史克力</span>
    </div>
    <div class="target">
        <ul>
            <li>达文西</li>
            <li>末梢血</li>
            <li>华泰强</li>
            <li>史克力</li>
        </ul>
    </div>
</div>

样式

* {
    margin: 0;
    padding: 0;
}
ul {
    list-style-type: none;
}
.box {
    width: 325px;
    border: 3px solid #C81623;
    margin: 100px auto;
}
.order {
    padding: 5px;
    padding-right: 0;
}
.order span {
    display: inline-block;
    width: 75px;
    height: 30px;
    margin-right: 5px;
    text-align: center;
    font: 400 normal 18px/30px "Microsoft Sans Serif";
    cursor: pointer;
    background-color: #DBE1E7;
}
.order span.special {
    background-color: #C81623;
}
.target li {
    width: 90%;
    height: 200px;
    padding: 5%;
    background-color: #d7d764;
    display: none;
}
.target li.show {
    display: block;
}

行为

 

window.onload = function () {
    function clearClass(aDiv) {
        for(var i= 0,l=aDiv.length;i<l;i++) {
            aDiv[i].className = "";
        }
    }
    function setIndex (aDiv) {
        for(var i= 0,l=aDiv.length;i<l;i++) {
            aDiv[i].index = i;
        }
    }
    function tab(parentId) {
        var oParent = document.getElementById(parentId);
        var aSpan = oParent.getElementsByTagName("span");
        var aLi = oParent.getElementsByTagName("li");
        setIndex(aSpan);
        for(var i= 0,l=aSpan.length;i<l;i++) {
            aSpan[i].onmouseover = function () {
                clearClass(aSpan);
                this.className = "special";
                clearClass(aLi);
                aLi[this.index].className = "show";
            }
        }
        aSpan[0].onmouseover();
    }

    tab("weiyi");
}