js实现多个选项卡切换功能

  • 作者:村长
  • 发布时间:2020-05-08 13:37
  • 分类:JavaScript
  • 标签: 热门推荐

实现方式一:

<!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;
        }
        #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" id="active" onmouseover="changeTab(0)"><a href="">动态</a></li>
            <li class="grid-cell-1" onmouseover="changeTab(1)"><a href="">新闻</a></li>
            <li class="grid-cell-1" onmouseover="changeTab(2)"><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>
        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;
            //闭包方式解决问题:
            var a = function(k){
                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";
                    boxs[k].style.display = "block";
                }
            };
            a(i);
        }
    </script>

</body>
</html>


实现代码二:给每个标签加一个序号属性值处理:

<!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;
        }
        #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" id="active" onmouseover="changeTab(0)"><a href="">动态</a></li>
            <li class="grid-cell-1" onmouseover="changeTab(1)"><a href="">新闻</a></li>
            <li class="grid-cell-1" onmouseover="changeTab(2)"><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>
        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