通过案例 详解点击事件获取li的index，并切换对应的图片，排他思想，闭包，bind，let，jquery简单应用，简单的tab栏制作-初学者html+css+js练习demo

今天来一个关于点击li获取对应的index的demo，内有详解和避坑指南，请安心食用，今日也是干货满满的一天

灵感来源是H5考试的一道题目，大概是这样的要求：

今天就来做一个类似的demo，“手把手”教会你怎么获取点击的li的值，妈妈再也不用担心我获取不到值啦~

图片有点不清晰 大家将就看

1.思路

道理其实很简单，就是每个ul里有很多li，每个li又对应了一张图片或者一个div，所有每个li和图片的数量和顺序是相同的，我们可以通过js获取到当前点击的li是第几个的话，就可以通过这个index来获取到li所对应的图片或者div
那么改变li和图片样式的，就是死记硬背的改变css样式的代码的事了（获取后改变class或者style）
我们设置一个class叫current，记住它是独一无二的，哪个li被点击了，就把这个独一无二的class给谁。
既然是独一无二的class，在给li之前肯定要先给它来一个庄重的授权仪式，咳咳，不是
是先把所有的li的class样式先清空，避免有其他的li也私藏了current这个class的情况，所有搜身清空完毕后，再把独一无二的class=“current”给到点击的li，这样就完成了li的点击样式改变。
img的样式直接用display：block显示/none隐藏 来控制就好，将获取到的index拿去匹配所有的imgs，就可以适合li的小妾啦，适合li的图片了

li和img的样式都用到的是排他的思想，用多了自然就熟悉了，感觉很难，理解了原理和逻辑就可以手到擒来啦

2.代码

今天使用的工具依然是Vscode，和preview on live server的插件 可以移步到这儿看详细介绍

1.html

<div class="container">
        <ul>
            <li class="current">熊猫1号</li>
            <li>熊猫2号</li>
            <li>熊猫3号</li>
            <li>小狗1号</li>
        </ul>
        <div class="imgs">
            <img src="./images/panda1.jpg" alt="1" style="display: block;">
            <img src="./images/panda2.jpg" alt="2">
            <img src="./images/panda3.jpg" alt="3">
            <img src="./images/dog3.jpg" alt="4">
        </div>
    </div>

2.css

样式的话，我们给container设置合适的宽度，再利用父相子绝的技巧（父元素相对定位，子元素绝对定位），图片也使用绝对定位，就不会拍列起来了，而是重叠的放置在同一个位置。
再用到一个盒子垂直居中的方法，将盒子定位在body的中央，由于默认的body标签的宽是浏览器一样宽，但是高度是由内容撑开的，我们就暂且给body手动设置一个高度。
不要忘记设置一个独一无二的名为current的class（命名为啥都OK，只要人知道它是独一无二的就好），这个里设置好当li被点击到要变成的样式，我这儿改变了背景颜色和字体颜色

        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        body {