var和let实现选项卡切换

清疚 2022-08-28 07:44 154阅读 0赞

**第一种：var**

**css:**

<style>
            * {
                padding: 0;
                margin: 0;
                list-style: none;
            }
    
            #wrap {
                position: relative;
                top: 10px;
                left: 10px;
            }
    
            #wrap button {
                padding: 3px 5px;
                margin: 5px 10px;
            }
    
            #wrap button.active {
                background-color: lightpink;
                color: deeppink;
            }
    
            #wrap p {
                width: 200px;
                height: 200px;
                border: 1px solid #000;
                position: absolute;
                top: 40px;
                left: 10px;
                font-size: 24px;
                line-height: 200px;
                text-align: center;
                display: none;
            }
    
            #wrap p.active {
                display: block;
            }
        </style>

** html:**

<div id="wrap">
            <button class="active">菜单1</button><button>菜单2</button><button>菜单3</button>
            <p class="active">内容1</p>
            <p>内容2</p>
            <p>内容3</p>
        </div>

**javascript:**

<script>
            /* 
                面向过程:
                    点击每一个菜单按钮显示对应的p的内容
            */
            // 1.获取元素
            var wrap = document.getElementById('wrap');
            var btns = wrap.getElementsByTagName('button');
            var ps = wrap.getElementsByTagName('p');
            console.log(btns, ps);
            // 2.每一个
            for (var i = 0; i < btns.length; i++) {
                // 自定义索引
                btns[i].index = i;
                btns[i].onclick = function () {
                    console.log(this.index);
                    for (var j = 0; j < ps.length; j++) {
                        ps[j].className = '';
                        btns[j].className = '';
                    }
                    // 指定下标
                    ps[this.index].className = 'active';
                    btns[this.index].className = 'active';
                }
            }
        </script>

**效果：**

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_16_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_17_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_18_color_FFFFFF_t_70_g_se_x_16][]

**第二种：let配合DOM绑定事件，可以不用考虑下标绑定this**

**css:**

<style>
            .box {
                width: 200px;
                height: 200px;
                border: 1px solid red;
                line-height: 200px;
                text-align: center;
                display: none;
                margin-top: 10px;
            }
        </style>

**html:**

<button>全部商品</button>
        <button>最新商品</button>
        <button>推荐商品</button>
        <div class="box" style="display: block;">全部商品</div>
        <div class="box">最新商品</div>
        <div class="box">推荐商品</div>

**javascript:**

<script> 
         let btns = document.querySelectorAll('button');
         let boxs = document.querySelectorAll('.box');
         console.log(btns, boxs);
         for (let i = 0; i < btns.length; i++) {
              btns[i].onclick = function () {
                 console.log(i);
                 for (let j = 0; j < boxs.length; j++) {
                     boxs[j].style.display = "none";
                 }
                 boxs[i].style.display = "block";
              }
          }
     </script>

**效果:**

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_16_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/44c8cb93eceb494eada57ee6b1a41b07.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_17_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/8f1871a2d5c546988a38067a8038451a.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_18_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/a5433dc3e74a4682847d924ab9133fa8.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/a7369ac5a7f94be993158190ca08d2bd.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/2e756090f1384ed19d0c6f03cc5844ba.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/50c1062e0edb4df597d5298373970a3f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，154人围观）

还没有评论，来说两句吧...

相关阅读

相关选项卡切换

一个选项卡，意思就是切换选项，一个最简单的列子，爱玩手机和电脑的肯定用过，选项卡和滚动条我觉得是差不多一个意思，当然只是差不多，并不绝对。因为两者都是屏幕高度不够，而设计出

ゞ浴缸里的玫瑰/ 2023年01月09日 03:51/ 0 赞/ 191 阅读

相关 vue 选项卡切换

vue 初学者选项卡切换效果： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_

ゞ浴缸里的玫瑰/ 2022年12月01日 15:53/ 0 赞/ 205 阅读

相关 var和let实现选项卡切换

第一种：var css: <style> { padding: 0; ma

清疚/ 2022年08月28日 07:44/ 0 赞/ 155 阅读

相关 Axure实现Tab选项卡切换功能

这几天用Axure画原型图的过程中，需要实现Tab选项卡切换的效果，但Axure中并没有类似于Tab控件的部件，所以可以用Axure中的动态面板(Dyn

àì夳堔傛蜴生んèń/ 2022年08月13日 19:45/ 0 赞/ 276 阅读

相关 trick：:target实现选项卡切换

:target是什么？ MDN是这样描述的：[:target][target] > The :target pseudo-class represents the un

谁借莪１个温暖的怀抱￠/ 2022年08月05日 02:27/ 0 赞/ 231 阅读

相关 js 选项卡切换

通过按钮来切换div 先将div隐藏，只显示第一个按钮为高亮，将div隐藏显示第一个div 通过js给按钮设置事件，通过点击的是哪一个按钮来设置其可见和高亮 <!

淩亂°似流年/ 2022年06月15日 12:55/ 0 赞/ 266 阅读

相关 Tab切换选项卡

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Tab切换选项卡

左手的ㄟ右手/ 2022年05月09日 06:58/ 0 赞/ 330 阅读

相关 let和var

刚看《数据结构与算法JavaScript描述》上说： > JavaScript中的变量默认是全局变量，严格地说，甚至不需要在使用前进行声明。那是不是说可以这么写呢：

Dear 丶/ 2022年02月24日 03:52/ 0 赞/ 207 阅读

相关 tab切换选项卡

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c

ゝ一纸荒年。/ 2022年02月02日 00:45/ 0 赞/ 423 阅读

相关 JS实现选项卡切换

面是用JS简单地实现选项卡功能的实例。 > 注意点：（1）闭包后，要使用立即执行函数； > > （2）绑定事件注意参数； > > （3）思路：将当前div显示，其余隐藏，

悠悠/ 2021年12月03日 10:45/ 0 赞/ 423 阅读