HTML

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Tab切换</title>
    <link type="text/css" rel="stylesheet" href="style.css">
    <script src="app.js"></script>
</head>
<body>
    <div class="tab"  id="tab">
        <div class="tab-title" id = "tab-title">
            <ul>
                <li class="select">
                    <a href="#">公告</a>
                </li>
                <li>
                    <a href="#">规则</a>
                </li>
                <li>
                    <a href="#">论坛</a>
                </li>
                <li>
                    <a href="#">安全</a>
                </li>
                <li>
                    <a href="#">公益</a>
                </li>
            </ul>
        </div>
        <div class="tab-content" id="tab-content">
            <div class="tabct" style="display: block">
                <ul>
                    <li>
                        <a href="#">八千家4S店参与双11</a>
                    </li>
                    <li>
                        <a href="#">故宫创意产品来袭啦</a>
                    </li>
                    <li>
                        <a href="#">阿里发布 YunOS 3.0</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="#">八千家4S店参与双11</a>
                    </li>
                    <li>
                        <a href="#">八千家4S店参与双11</a>
                    </li>
                </ul>
            </div>
            <div class="tabct" style="display: none">
                <ul>
                    <li>
                        <a href="#">八千家4S店参与双11</a>
                    </li>
                    <li>
                        <a href="#">八千家4S店参与双11</a>
                    </li>
                    <li>
                        <a href="#">八千家4S店参与双11</a>
                    </li>
                    <li>
                        <a href="#">国企业厂家大联动</a>
                    </li>
                </ul>
            </div>
            <div class="tabct" style="display: none">
                <ul>
                    <li>
                        <a href="#">八千家4S店参与双11</a>
                    </li>
                    <li>
                        <a href="#">八千家4S店参与双11</a>
                    </li>
                    <li>
                        <a href="#">国企业厂家大联动</a>
                    </li>
                    <li>
                        <a href="#">八千家4S店参与双11</a>
                    </li>
                </ul>
            </div>
            <div class="tabct" style="display: none">
                <ul>
                    <li>
                        <a href="#">国企业厂家大联动</a>
                    </li>
                    <li>
                        <a href="#">国企业厂家大联动</a>
                    </li>
                    <li>
                        <a href="#">八千家4S店参与双11</a>
                    </li>
                    <li>
                        <a href="#">国企业厂家大联动</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

CSS

*{
    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: -1;
}
.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;
}

JS

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 i = 0;i<titleName.length;i++){
        titleName[i].id = i;
        titleName[i].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";
        }
    }
}

标签：前端

你的评论