这里实现一个简单的需求,当鼠标移入某个div区域时,显示不同的内容,即TAB切换选项卡.这里是用事件来实现, 知识点较少, 下次 写一个构造函数实现的, 理解更加清晰.

分析

1. HTML 两个div, 一个标题, 一个内容
2. CSS部分通过给标题,内容的ul设置class属性为active, 先设置ul为display: none, 后给active设置display: block, 此时,默认显示选中的ul部分.
3. JS部分获取标题下所有的li, 获取内容下的所有ul,因为是逐个显示ul的,遍历所有的li, 给li添加鼠标移入事件 , 把tabs 和 ul的class name修改掉即可. 没有移入时, 将class name设置为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>职业指导</li>
                <li>充电区</li>
            </ul>
            <span id="state">-</span>
        </div>
        <div id="list">
            <ul class="active">
                <li>IE6 PNG 解决方案合集</li>
                <li>firefox下输入框innerHtml问题</li>
                <li>精品菜单导航，多年精心收集整理上上品菜单</li>
            </ul>
            <ul>
                <li>腾讯面试题</li>
                <li>近期面试感受</li>
                <li>腾讯实习生web前端js开发工程师面试经历</li>
            </ul>
            <ul>
                <li>厘米IT学院第89期</li>
                <li>厘米IT学院第88期</li>
                <li>厘米IT学院第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;
    }