js实现鼠标滑过选项卡切换效果

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 12px;
    }
    .tab {
        width: 298px;
        height: 98px;
        margin: 10px;
        border: 1px solid #eee;
        overflow: hidden;
    }
    .tab-title {
        height: 27px;
        position: relative;
        background: #f7f7f7;
    }
    .tab-title ul {
        position: absolute;
        width: 301px;
        left: -1px;
    }
    .tab-title li {
        float: left;
        width: 58px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        padding: 0 1px;
        border-bottom: 1px solid #eee;
        overflow: hidden;
    }
    .tab li a:link, .tab li a:visited {
        text-decoration: none;
        color: #000;
    }
    .tab li a:hover {
        color: #f90;
        font-weight: 700;
    }
    .tab-title li.select {
        background: #fff;
        border-bottom-color: #fff;
        border-left: 1px solid #eee;
        border-right: 1px solid #eee;
        padding: 0;
    }
    .tab .tab-content .tabct {
        margin: 10px 10px 10px 19px;
    }
    .tab .tab-content .tabct ul li {
        float: left;
        width: 134px;
        height: 25px;
        overflow: hidden;
    }
</style>

<body>
<div class="tab" id="tab">
    <div class="tab-title" id="tab-title">
        <ul>
            <li class="select"><a href="#">css</a></li>
            <li><a href="#">js</a></li>
            <li><a href="#">php</a></li>
            <li><a href="#">jquery</a></li>
        </ul>
    </div>
    <div class="tab-content" id="tab-content">
        <div class="tabct" style="display: block">
            <ul>
                <li><a href="#">爱你不是两三天</a></li>
                <li><a href="#">你是我的蝴蝶</a></li>
                <li><a href="#">在人来人往的街上想起你</a></li>
                <li><a href="#">你是魔鬼中的天使</a></li>
            </ul>
        </div><div class="tabct" style="display: none">
            <ul>
                <li><a href="#">只不过是打了个照面</a></li>
                <li><a href="#">为什么只能和你聊一整夜</a></li>
                <li><a href="#">曾经小小少年</a></li>
                <li><a href="#">那是个什么样的人啊</a></li>
            </ul>
        </div><div class="tabct" style="display: none">
            <ul>
                <li><a href="#">歌词？想不起来了</a></li>
                <li><a href="#">就这样随便写吧</a></li>
                <li><a href="#">只是不想重复而已</a></li>
                <li><a href="#">好吧好吧哈哈哈</a></li>
            </ul>
        </div><div class="tabct" style="display: none">
            <ul>
                <li><a href="#">回去看向往的生活</a></li>
                <li><a href="#">明天看极限挑战美滋滋</a></li>
                <li><a href="#">天天向上还没看</a></li>
                <li><a href="#">啊我好忙</a></li>
            </ul>
        </div>
    </div>
</div>
<script>
    function $(id) {
        return typeof id == "string" ? document.getElementById(id) : id;
    }
    window.onload = function() {
        var titleName = $("tab-title").getElementsByTagName("li");
        var tabContent = $("tab-content").getElementsByTagName("div");
        if (titleName.length != tabContent.length) {
            return;
        }
        for (var index = 0; index < titleName.length; index++) {
            titleName[index].id = index;
            titleName[index].onmouseover = function () {
                for (var j = 0; j < titleName.length; j++) {
                    titleName[j].className = "";
                    tabContent[j].style.display = "none"
                }
                this.className = "select";
                tabContent[this.id].style.display = "block";
            }
        }
    }
</script>
</body>
</html>
效果如图：

 仍有几点疑惑：1：this.clssName="selece"是添加了ClassName？直接添加？有待学习；
2：$function方法，document和该方法使用时的差异；
3：css不够熟悉，浮动设置了很久气出没有反应；
4：position的选择。
js实现鼠标滑过选项卡切换效果

猜你喜欢
