原生JS选项卡(Tab页切换)

使用原生JS实现选项卡功能。
效果:


image.png

原理:全部隐藏,选择哪个哪个显示。
代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #all{
                width: 600px;
                margin: 50px auto;
                height: 500px;
                border: 2px red solid;
                position: relative;
            }
            #all #tab li{
                list-style: none;
                float: left;
                width: 200px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                font-size: 30px;
                font-weight: 700;
            }
            #all .con{
                width: 580px;
                height: 430px;
                position: absolute;
                top: 60px;
                left: 10px;
                display: none;
            }
        </style>
        <script type="text/javascript">
            window.onload = function(){
                var tab = document.getElementById("tab");
                var lis = tab.getElementsByTagName('li');//获得标签li的数组
                var cons = document.getElementsByClassName('con');//获得下面内容div的数组
                for(var i=0;i<lis.length;i++){
                    lis[i].num = i;//给对象添加属性,赋值用于标记
                    lis[i].onmousemove = function(){
                        //div先全部隐藏
                        for(var j = 0;j<cons.length;j++){
                            cons[j].style.display = 'none';
                        }
                        //显示与鼠标所在li对应位置的div
                        cons[this.num].style.display = 'block';
                    }
                }
            }
        </script>
    </head>
    
    <body>
        <div id="all">
            <ul id="tab">
                <li style="background: greenyellow;">军事</li>
                <li style="background: palevioletred;">民生</li>
                <li style="background: paleturquoise;">娱乐</li>
            </ul>
            <div class="con" style="display:block;background: greenyellow;"></div>
            <div class="con" style="background: palevioletred;"></div>
            <div class="con" style="background: paleturquoise;"></div>
        </div>
    </body>
</html>

如有问题欢迎交流。

如转载请注明出处,谢谢!

推荐阅读更多精彩内容