仿淘宝页面里的简单标签切换代码,Css代码库,德仔网

代码语言
代码分类
【Css】仿淘宝页面里的简单标签切换
作者: / 发布于2016/9/20/ 755
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <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: -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;
    }
    </style>

</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="#">郎平指导一行到访阿里</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="#">G20杭州快递影响</a></li>
                    <li><a href="#">G20杭州快递影响</a></li>
                    <li><a href="#">G20杭州快递影响</a></li>
                    <li><a href="#">G20杭州快递影响</a></li>
                </ul>
            </div>
            <div class="tabct" style="display:none">
                <ul>
                    <li><a href="#">少走这6个开店弯路</a></li>
                    <li><a href="#">少走这6个开店弯路</a></li>
                    <li><a href="#">少走这6个开店弯路</a></li>
                    <li><a href="#">少走这6个开店弯路</a></li>
                </ul>
            </div>
            <div class="tabct" style="display: none">
                <ul>
                    <li><a href="#">阿里捐赠700万元救灾</a></li>
                    <li><a href="#">阿里捐赠700万元救灾</a></li>
                    <li><a href="#">阿里捐赠700万元救灾</a></li>
                    <li><a href="#">阿里捐赠700万元救灾</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 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";
            }
        }
    }
</script>
</body>

</html>
试试其它关键字
同语言下
可能有用的
贡献的其它代码Label