实现选项卡功能

  • 作者:村长
  • 发布时间:2020-04-18 10:56
  • 分类:HTML+CSS
  • 标签: 热门推荐

JS实现选项卡功能:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态改变选框</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        a{
            text-decoration: none;
            color:#000;
        }
        .active{
            background: tomato !important;
        }
        .active a{
            color:#fff;
        }
        ul li{
            list-style: none;
        }
        .grid{
            display: flex;
        }
        .grid-cell-1{
            flex-grow: 1;
        }
        .container{
            width:500px;
            border:1px solid #ccc;
            margin:0 auto;
        }
        .container ul li{
            text-align: center;
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #ccc;
        }
        .content div{
            min-width: 100%;
            min-height: 400px;
            display: none;
        }
        #box1{
            /* 只显示第一个 */
            display: block;
        }
    </style>
</head>
<body>
    
    <div class="container">
        <ul class="grid" id="tabName">
            <li class="grid-cell-1 active" ><a href="">动态</a></li>
            <li class="grid-cell-1" ><a href="">新闻</a></li>
            <li class="grid-cell-1"><a href="">娱乐</a></li>
            <li class="grid-cell-1"><a href="">娱乐</a></li>
        </ul>
        <div class="content">
            <div id="box1">
                我是盒子1
            </div>
            <div>
                222222222222222
            </div>
            <div>
                33333333333333333
            </div>
            <div>
                4444444444444444
            </div>
        </div>
    </div>
    <script src="./js/jquery-3.3.1.min.js"></script>
    <script>
        $("#tabName li").each(function(index){
            $(this).mouseover(function(){
                $(this).addClass("active").siblings().removeClass("active");
                $(".content div").eq(index).show().siblings().hide();
            });
        });

        // var tabName = document.getElementById("tabName");
        // var lis = tabName.getElementsByTagName("li");
        // var content = document.getElementsByClassName("content")[0];
        // var boxs = content.getElementsByTagName("div");

        // function changeTab(num)
        // {
        //     // for(var i=0;i<boxs.length;i++)
        //     // {
        //     //     boxs[i].style.display = "none";
        //     //     lis[i].id = "";
        //     // }
        //     // //只有选中的那个才显示
        //     // boxs[num].style.display = "block";
        //     // lis[num].id = "active";
        // }

        // // 获取对应列表下的盒子
        // for(var i=0;i<lis.length;i++)
        // {
        //     //给对应的标签加一个序号
        //     lis[i].index = i;
        //     lis[i].onmouseover = function(){
        //         for(var j=0;j<lis.length;j++)
        //         {
        //             lis[j].id = "";
        //         }
        //         this.id = "active";
        //         for(var j=0;j<boxs.length;j++)
        //         {
        //             boxs[j].style.display = "none";
        //         }
        //         //取对应的序号回来加
        //         boxs[this.index].style.display = "block";
        //     }
        // }
    </script>

</body>
</html>


  • php程序员面试笔试宝典
琉忆编程库
加载中...
TOP