0

下面的代码效果是,tab切换显示的内容,鼠标指向内容的一条会再显示出来。目前遇到的问题是,第二个tab,下面的内容不能因为鼠标经过显示。代码里面记录tab索引值的全局变量,似乎失效?PS,CSS没有全部写完。
HTML:

<!DOCTYPE html>
<html lang="cmn-hans">

<head>
    <meta charset="utf-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <!-- some meta tags, important for SEO"-->
    <meta name="description" content="put a short description in here" />
    <meta name="keywords" content="put your important keywords in here" />
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <script src="js/base.js" type="text/javascript" charset="utf-8"></script>
    <title>信息切换</title>
</head>

<body>
    <nav>
        <ul>
            <li class="on"><a href="javascript:;" title="">前端</a></li>
            <li><a href="javascript:;" title="">后端</a></li>
        </ul>
    </nav>
    <div class="content on">
        <ul>
            <li>
                <a href="javascript:;" title="">前端工程师</a>
                <div class="tips">
                    <h4>海口XXXXX有限责任公司</h4>
                    <ul>
                        <li>3人</li>
                        <li>北京</li>
                        <li>不限</li>
                        <li>本科</li>
                        <li>面议</li>
                        <li>2017-9-2</li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="javascript:;" title="">网站前端页面设计</a>
                <div class="tips">
                    <h4>海口XXXXX有限责任公司</h4>
                    <ul>
                        <li>3人</li>
                        <li>北京</li>
                        <li>不限</li>
                        <li>本科</li>
                        <li>面议</li>
                        <li>2017-9-2</li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="javascript:;" title="">高级web前端工程师</a>
                <div class="tips">
                    <h4>海口XXXXX有限责任公司</h4>
                    <ul>
                        <li>3人</li>
                        <li>北京</li>
                        <li>不限</li>
                        <li>本科</li>
                        <li>面议</li>
                        <li>2017-9-2</li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="javascript:;" title="">HTML5前端工程师</a>
                <div class="tips">
                    <h4>海口XXXXX有限责任公司</h4>
                    <ul>
                        <li>3人</li>
                        <li>北京</li>
                        <li>不限</li>
                        <li>本科</li>
                        <li>面议</li>
                        <li>2017-9-2</li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="javascript:;" title="">前端工程师</a>
                <div class="tips">
                    <h4>海口XXXXX有限责任公司</h4>
                    <ul>
                        <li>3人</li>
                        <li>北京</li>
                        <li>不限</li>
                        <li>本科</li>
                        <li>面议</li>
                        <li>2017-9-2</li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="javascript:;" title="">网站前端设计</a>
                <div class="tips">
                    <h4>海口XXXXX有限责任公司</h4>
                    <ul>
                        <li>3人</li>
                        <li>北京</li>
                        <li>不限</li>
                        <li>本科</li>
                        <li>面议</li>
                        <li>2017-9-2</li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="javascript:;" title="">诚招web前端开发工程师</a>
                <div class="tips">
                    <h4>海口XXXXX有限责任公司</h4>
                    <ul>
                        <li>3人</li>
                        <li>北京</li>
                        <li>不限</li>
                        <li>本科</li>
                        <li>面议</li>
                        <li>2017-9-2</li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="javascript:;" title="">web前端DIV+CSS</a>
                <div class="tips">
                    <h4>海口XXXXX有限责任公司</h4>
                    <ul>
                        <li>3人</li>
                        <li>北京</li>
                        <li>不限</li>
                        <li>本科</li>
                        <li>面议</li>
                        <li>2017-9-2</li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="javascript:;" title="">前端设计</a>
                <div class="tips">
                    <h4>海口XXXXX有限责任公司</h4>
                    <ul>
                        <li>3人</li>
                        <li>北京</li>
                        <li>不限</li>
                        <li>本科</li>
                        <li>面议</li>
                        <li>2017-9-2</li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="javascript:;" title="">招聘 前端页面工作者</a>
                <div class="tips">
                    <h4>海口XXXXX有限责任公司</h4>
                    <ul>
                        <li>3人</li>
                        <li>北京</li>
                        <li>不限</li>
                        <li>本科</li>
                        <li>面议</li>
                        <li>2017-9-2</li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="javascript:;" title="">页面前端工程师</a>
                <div class="tips">
                    <h4>海口XXXXX有限责任公司</h4>
                    <ul>
                        <li>3人</li>
                        <li>北京</li>
                        <li>不限</li>
                        <li>本科</li>
                        <li>面议</li>
                        <li>2017-9-2</li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="javascript:;" title="">高级web前端工程师</a>
                <div class="tips">
                    <h4>海口XXXXX有限责任公司</h4>
                    <ul>
                        <li>3人</li>
                        <li>北京</li>
                        <li>不限</li>
                        <li>本科</li>
                        <li>面议</li>
                        <li>2017-9-2</li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="javascript:;" title="">HTML5前端工程师</a>
                <div class="tips">
                    <h4>海口XXXXX有限责任公司</h4>
                    <ul>
                        <li>3人</li>
                        <li>北京</li>
                        <li>不限</li>
                        <li>本科</li>
                        <li>面议</li>
                        <li>2017-9-2</li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="javascript:;" title="">前端工程师</a>
                <div class="tips">
                    <h4>海口XXXXX有限责任公司</h4>
                    <ul>
                        <li>3人</li>
                        <li>北京</li>
                        <li>不限</li>
                        <li>本科</li>
                        <li>面议</li>
                        <li>2017-9-2</li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="javascript:;" title="">网站前端设计</a>
                <div class="tips">
                    <h4>海口XXXXX有限责任公司</h4>
                    <ul>
                        <li>3人</li>
                        <li>北京</li>
                        <li>不限</li>
                        <li>本科</li>
                        <li>面议</li>
                        <li>2017-9-2</li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
    <div class="content">
        <ul>
            <li>
                <a href="javascript:;" title="">PHP工程师</a>
                <div class="tips">
                    <h4>海口XXXXX有限责任公司</h4>
                    <ul>
                        <li>3人</li>
                        <li>北京</li>
                        <li>不限</li>
                        <li>本科</li>
                        <li>面议</li>
                        <li>2017-9-2</li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="javascript:;" title="">诚招java开发工程师</a>
                <div class="tips">
                    <h4>海口XXXXX有限责任公司</h4>
                    <ul>
                        <li>3人</li>
                        <li>北京</li>
                        <li>不限</li>
                        <li>本科</li>
                        <li>面议</li>
                        <li>2017-9-2</li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="javascript:;" title="">java工程师</a>
                <div class="tips">
                    <h4>海口XXXXX有限责任公司</h4>
                    <ul>
                        <li>3人</li>
                        <li>北京</li>
                        <li>不限</li>
                        <li>本科</li>
                        <li>面议</li>
                        <li>2017-9-2</li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="javascript:;" title="">.net工程师</a>
                <div class="tips">
                    <h4>海口XXXXX有限责任公司</h4>
                    <ul>
                        <li>3人</li>
                        <li>北京</li>
                        <li>不限</li>
                        <li>本科</li>
                        <li>面议</li>
                        <li>2017-9-2</li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="javascript:;" title="">招聘php程序员</a>
                <div class="tips">
                    <h4>海口XXXXX有限责任公司</h4>
                    <ul>
                        <li>3人</li>
                        <li>北京</li>
                        <li>不限</li>
                        <li>本科</li>
                        <li>面议</li>
                        <li>2017-9-2</li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="javascript:;" title="">PHP高级工程师</a>
                <div class="tips">
                    <h4>海口XXXXX有限责任公司</h4>
                    <ul>
                        <li>3人</li>
                        <li>北京</li>
                        <li>不限</li>
                        <li>本科</li>
                        <li>面议</li>
                        <li>2017-9-2</li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</body>

</html>

CSS:

/*
* @Author: chaihongjun
* @Date:   2017-09-02 20:08:58
* @Last Modified by:   chaihongjun
* @Last Modified time: 2017-09-02 23:56:23
*/
*{
    padding:0;
    margin: 0;
}

nav{
    width: 800px;
    height: 50px;
    border-bottom: 3px solid #f60;
}
nav ul{
    list-style: none;
}

nav li{
    width: 100px;
    height: 50px;
    line-height: 50px;
    float: left;
}
nav a{
    text-decoration: none;
    display: block;
    text-align: center;
    color: #000;
}

nav .on a{
    color: #fff;
    background: #f60;
}


.content{
    display: none;
}


.content ul{
    list-style: none;
}
.content li {
      position: relative;
        height: 30px;
        line-height: 30px;
        font-size: 16px;

}


.content li a{


}

.content.on{
    display: block;
}


.tips{
    border: 2px solid #f60;
    width: 400px;
    height: 90px;
    padding: 10px 10px 0 10px;
    display: none;
}

.tips.on{
    display: block;
    position: absolute;
}


.tips h4{
    height: 20px;
    line-height: 20px;
}

.tips ul{
    list-style: none;
}

.tips ul li{
    float: left;
    width: 200px;
    height: 20px;
    line-height: 20px;
    border-bottom: 1px solid #ccc;
}

jS:

/*
 * @Author: chaihongjun
 * @Date:   2017-09-02 21:31:38
 * @Last Modified by:   chaihongjun
 * @Last Modified time: 2017-09-03 00:34:42
 */
window.onload = function() {
    var tabs = document.getElementsByTagName('nav')[0].getElementsByTagName('a');
    var contents = document.getElementsByClassName('content');
    var list = 0; //记录tab索引值
    //点击TAB切换
    for (var i = 0; i < tabs.length; i++) {
        tabs[i].index = i;
        tabs[i].onclick = function() {
            for (var j = 0; j < tabs.length; j++) {
                tabs[j].parentNode.classList.remove('on');
                contents[j].classList.remove('on');
            }
            this.parentNode.classList.add('on');
            contents[this.index].classList.add('on');
            list = this.index;
        };
    }


    var currentContent = contents[list];
    var currentA = currentContent.getElementsByTagName('a');
    var tips = currentContent.getElementsByClassName('tips');
    for (var i = 0; i < currentA.length; i++) {
        currentA[i].index = i;
        //移入显示tips
        currentA[i].onmouseover = function() {

       console.log('list:' + list);
            //初始化全部不显示
            for (var j = 0; j < currentA.length; j++) {
                tips[j].classList.remove('on');
            }
            //高亮指向的tips
            tips[this.index].classList.add('on');
        };
        //移出不 显示tips
        currentA[i].onmouseout = function() {
            for (var j = 0; j < currentA.length; j++) {
                tips[j].classList.remove('on');
            }
        };
    };
};

1个回答

0
for (var i = 0; i < tabs.length; i++) {
    (function(index){
        tabs[index].index = index;
        tabs[index].onclick = function() {
            for (var j = 0; j < tabs.length; j++) {
                tabs[j].parentNode.classList.remove('on');
                contents[j].classList.remove('on');
            }
            this.parentNode.classList.add('on');
            contents[this.index].classList.add('on');
            list = this.index;
        };
    })(i)
    
}

撰写答案

Planets