仿淘宝切换卡

迈不过友情╰ 2022-11-21 11:17 170阅读 0赞

## 切换卡 ##

> 仿电商切换卡

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            * { 
                padding: 0;
                margin: 0;
                list-style: none;
            }
    
            #container { 
                margin: 0 auto;
            }
            ul { 
                height: 50px;
                border: 1px solid gainsboro;
            }
            ul li { 
                float: left;
                margin: 0 7px;
                text-align: center;
                display: block;
                width: 40px;
                height: 50px;
                color: #000;
                line-height: 50px;
                padding: 0 5px;
            }
    
            ul li:hover { 
                border-bottom: 2px solid orange;
                cursor: pointer;
            }
            div { 
                margin-top: 2px;
                width: 325px;
            }
            .hide { 
                display: none;
            }
        </style>
    </head>
    
    <body>
        <div id="container">
            <ul>
                <li>公告</li>
                <li>规则</li>
                <li>论坛</li>
                <li>安全</li>
                <li>公益</li>
            </ul>
    
            <div class="">111</div>
            <div class="hide">222</div>
            <div class="hide">333</div>
            <div class="hide">444</div>
            <div class="hide">555</div>
        </div>
    
    
    
    <script>
        //1获取对象
        var oLis = document.querySelectorAll("li");
        var con = document.getElementById("container");
        var oDivs = con.getElementsByTagName("div");
    
        //2注册事件 onmouseover
        for (var i = 0; i < oLis.length; i++) { 
            oLis[i].index = i;
            oLis[i].onmouseover = function () { 
                //遍历隐藏内容
                for (var j = 0; j < oLis.length; j++) { 
                    oDivs[j].className = "hide";
                }
                //显示hover
                oDivs[this.index].className = " ";
            }
    
    /* for (var j = 1; j < oLis.length; j++) { oDivs[j].className = "hide"; }*/
        }
    </script>
    </body>
    </html>