JavaScript原生写tabs选项卡

标签: 项目总结

样式一

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body * {
            border: 1px solid red;
            margin: 20px;
            cursor: pointer;
        }
        li{
            border: 0px solid red;
        }
        .condiv {
            border: 0px solid red;
        }
        section div{
            display: none;
            height: 200px;
        }
        button{
            display: block;
        }
        .hide{
            display: none;
        }
        .show{
            display: block;
        }
    </style>
</head>

<body>
     <section onclick="fn()">
       <button>首页</button>
          <div>首页11111111111111111111</div>
       <button>服务</button>
          <div>服务11111111111111111111</div>
       <button>案例</button>
          <div>案例11111111111111111111</div>
       <button>关于</button>
          <div>案例11111111111111111111</div>
   </section>
   <script>
        function fn() {
            var conDivs = document.querySelectorAll("section div")
            conDivs.forEach(function (currentEle) {
                currentEle.className = "hide";
            })
            //事件代理第一步:通过事件对象的target属性获取点击的那个元素
            var ele = event.target;
            //找到当前点击的元素在所有li中的位置
            var lis = document.querySelectorAll("section button");
            var arlis=Array.from(lis);
            var liIndex=arlis.indexOf(ele)
            console.log(liIndex)

            if(liIndex!=-1){
                conDivs[liIndex].className="show";
            }

        }
    </script> 
    </body>

</html>

样式二

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .hide {
            display: none;
        }

        .show {
            display: block;
        }

        section div {
            border: 1px solid red;
            height: 300px;
        }
    </style>
</head>

<body>
    <div class="btns">
        <button>导航一</button>
        <button>导航二</button>
        <button>导航三</button>
    </div>
    <section>
        <div>
            111111111111contont
        </div>
    </section>
    <script>
        var btns = document.querySelectorAll(".btns button");
        btns.forEach(function (ele, i) {
            ele.onclick = function () {
                var div = document.querySelector("section div");
                if (i == 0)
                    div.innerHTML = "1111111111111"
                else if (i == 1)
                    div.innerHTML = "2222222222222"
                else
                    div.innerHTML = "333333333333"
            }
        })
    </script>
</body>

</html>
版权声明:本文为A_9888原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/A_9888/article/details/106718266