JavaScript原生写tabs选项卡

最新推荐文章于 2022-09-05 16:15:19 发布

冷太阳a

最新推荐文章于 2022-09-05 16:15:19 发布

阅读量278

点赞数

分类专栏：项目总结

本文链接：https://blog.csdn.net/A_9888/article/details/106718266

版权

项目总结专栏收录该内容

50 篇文章 0 订阅

订阅专栏

样式一

在这里插入图片描述

<!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

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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>D.
复制链接

扫一扫