這里實現(xiàn)一個簡單的需求,當鼠標移入某個div區(qū)域時,顯示不同的內(nèi)容,即TAB切換選項卡.這里是用事件來實現(xiàn), 知識點較少, 下次 寫一個構(gòu)造函數(shù)實現(xiàn)的, 理解更加清晰.

分析

1. HTML 兩個div, 一個標題, 一個內(nèi)容
2. CSS部分通過給標題,內(nèi)容的ul設(shè)置class屬性為active, 先設(shè)置ul為display: none, 后給active設(shè)置display: block, 此時,默認顯示選中的ul部分.
3. JS部分獲取標題下所有的li, 獲取內(nèi)容下的所有ul,因為是逐個顯示ul的,遍歷所有的li, 給li添加鼠標移入事件 , 把tabs 和 ul的class name修改掉即可. 沒有移入時, 將class name設(shè)置為active即可

JS部分

    window.onload = function() {
            var $ = function(ids) {
                return document.getElementById(ids);
            }
            var tabs = $("tabs").getElementsByTagName("li");
            var state = $("state");
            var ul = list.getElementsByTagName("ul");

            for (var i = 0; i < tabs.length; i++) {
                tabs[i].index = i;
                tabs[i].onmouseover = function() {
                    for (var i = 0; i < tabs.length; i++) {
                        tabs[i].className = ul[i].className = '';
                    }
                    this.className = ul[this.index].className = "active";
                }
            }
    }

HTML 部分

    <div id="content">
        <div id="tabs">
            <ul>
                <li class="active">暴給力</li>
                <li>職業(yè)指導(dǎo)</li>
                <li>充電區(qū)</li>
            </ul>
            <span id="state">-</span>
        </div>
        <div id="list">
            <ul class="active">
                <li>IE6 PNG 解決方案合集</li>
                <li>firefox下輸入框innerHtml問題</li>
                <li>精品菜單導(dǎo)航，多年精心收集整理上上品菜單</li>
            </ul>
            <ul>
                <li>騰訊面試題</li>
                <li>近期面試感受</li>
                <li>騰訊實習(xí)生web前端js開發(fā)工程師面試經(jīng)歷</li>
            </ul>
            <ul>
                <li>厘米IT學(xué)院第89期</li>
                <li>厘米IT學(xué)院第88期</li>
                <li>厘米IT學(xué)院第87期</li>
            </ul>
        </div>
    </div>

CSS 部分

    * {
        margin: 0;
        padding: 0;
    }

    body {
        font-size: 12px;
    }

    #content {
        /*margin: 0 auto;*/
        width: 600px;
        border: 1px #000 solid;
    }

    #tabs {
        height: 30px;
        background: black;
        overflow: hidden;
        position: relative;
    }

    #tabs #state {
        display: block;
        top: 0;
        right: 0;
        width: 30px;
        height: 30px;
        font-size: 24px;
        font-weight: 700;
        text-align: center;
        color: #fff;
        cursor: pointer;
        position: absolute;
    }

    #tabs li {
        display: inline;
        /**/
        padding: 0 8px;
        line-height: 30px;
        color: #fff;
        list-style: none;
        cursor: pointer;
        float: left;
    }

    #tabs .active {
        color: #000;
        background: #fff;
    }

    #list {
        padding: 10px 0;
    }

    #list ul {
        margin: 0 25px;
        display: none;
    }

    #list ul li {
        height: 25px;
        line-height: 25px;

    }

    #list .active {
        display: block;
    }