es6语法--原生js语法--闭包--jquery--四种类型实现tab栏切换

最新推荐文章于 2022-10-20 22:24:00 发布

少年的舟

最新推荐文章于 2022-10-20 22:24:00 发布

阅读量227

点赞数

文章标签： javascript es6

本文链接：https://blog.csdn.net/weixin_46113485/article/details/104998243

版权

index.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         li{
            list-style: none;
             display: inline-block;
            margin-right: 50px;
             cursor: pointer;
        }
        ol li{
            display: none;
        }
    </style>
    <script src="../js/jquery-1.11.0.min.js"></script>
</head>
<body>
<ul>
    <li>11</li>
    <li>22</li>
    <li>33</li>
</ul>
<ol>
    <li style="display: block">哈哈哈</li>
    <li>呵呵呵</li>
    <li>哦哦哦</li>
</ol>
<script>
    // 1.es6语法
    // const btns = document.querySelectorAll('ul li')
    // const lis = document.querySelectorAll('ol li')
    // for (let i=0;i<btns.length;i++){
    //     btns[i].addEventListener('click',function () {
    //         console.log(i);
    //         for (let j=0;j<btns.length;j++){
    //             lis[j].style.display = 'none'
    //         }
    //         lis[i].style.display = 'block'
    //     })
    // }

    // 2.原生
   // var btns = document.querySelectorAll('ul li')
   //  var lis = document.querySelectorAll('ol li')
   //  for (var i=0;i<btns.length;i++){
   //      btns[i].setAttribute('index',i)
   //      btns[i].addEventListener('click',function () {
   //          var index = this.getAttribute('index')
   //          console.log(index);
   //          for (var j=0;j<btns.length;j++){
   //              lis[j].style.display = 'none'
   //          }
   //          lis[index].style.display = 'block'
   //      })
   //  }

    // 3.采用闭包
    // var btns = document.querySelectorAll('ul li')
    // var lis = document.querySelectorAll('ol li')
    // for (var i=0;i<btns.length;i++){
    //     (function (i) {
    //         btns[i].addEventListener('click',function () {
    //             for (var j=0;j<btns.length;j++){
    //                 lis[j].style.display = 'none'
    //             }
    //             lis[i].style.display = 'block'
    //         })
    //     })(i)
    // }
    
    // 4.jQuery实现
    $(function () {
        $('ul li').on('click',function () {
            var index = $(this).index()
            console.log(index);
            $('ol li').eq(index).show().siblings().hide()
        })
    })
</script>
</body>
</html>

运行结果：
在这里插入图片描述

少年的舟

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
es6语法--原生js语法--闭包--jquery--四种类型实现tab栏切换

index.html代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> li{ list-style: non...
复制链接

扫一扫