【JavaScript练习二】点击Tab栏不同选项卡切换显示的内容

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、Tab栏的实现

二、完整代码

1.HTML代码

代码如下：
div+ul>li

```html
<div class="tab">
        <!-- 列表栏 -->
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（1000+）</li>
                <li>本店好评商品</li>
            </ul>
            <div class="shopcar">
                <a href="#">加入购物车</a>
            </div>
        </div>

        <!-- 显示内容栏 -->
        <div class="tab_con">
            <div class="item" style="display: block;">商品介绍</div>
            <div class="item">规格与包装</div>
            <div class="item">售后保障</div>
            <div class="item">商品评价（1000+）</div>
            <div class="item">本店好评商品</div>
        </div>
    </div>

2.CSS代码

代码如下：

        * {
            padding: 0;
            margin: 0;
        }

        a {
            text-decoration: none;
        }

        ul li {
            list-style: none;
        }

        .tab {
            margin: 200px auto;
            width: 990px;
            height: 325px;
        }

        .tab .tab_list {
            background-color: #f7f7f7;
            width: 990px;
            height: 39px;
            border-bottom: skyblue solid 1px;
        }

        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            text-align: center;
            cursor: pointer;
            font-size: 14px;
            padding: 0 20px;
            color: #666;
        }

        .tab_list li:hover {
            color: skyblue;
        }

        .tab_list .current {
            background-color: skyblue;
            color: #fff;
        }

        .tab_list .current:hover {
            color: #fff;
        }

        .shopcar {
            float: right;
            width: 105px;
            height: 30px;
            line-height: 24px;
            background-color: skyblue;
            text-align: center;
            margin-top: 4.5px;
            margin-right: 8px;
            border-radius: 15px;
        }

        .shopcar a {
            font-size: 12px;
            color: #fff;
        }

        .item {
            display: none;
        }

        .tab_con {
            width: 990px;

        }

3.JavaScript代码

代码逻辑：
1、实现选项卡切换效果
（1）定义变量，获取元素，将所获取的元素赋值给变量
（2）for循环，遍历名为lis的数组，循环变量i从0开始，当i小于lis.length时，循环继续执行。在每次循环中，可以对数组中的每个元素进行操作。
（3）设置索引号，设置点击事件处理程序
（4）将所有列表元素（lis）的类名设置为空字符串
（5）将当前激活的选项卡的类名设置为’current’
2、实现显示与隐藏内容栏
（1）首先通过getAttribute(‘index’)方法获取当前元素的index属性值
（2）然后使用一个for循环遍历items数组
（3）并将所有元素的display样式属性设置为none，即隐藏状态。
（4）最后将index对应元素的display样式属性设置为block，即显示状态
（5）这段代码根据当前元素的index属性值，切换相应元素的显示与隐藏状态。

代码如下：

  // 1.点击某个选项卡，其底色改变，其余不变，实现选项卡切换效果
        // 定义变量，获取元素
        let tab_list = document.querySelector('.tab_list');
        let lis = tab_list.querySelectorAll('li');
        let items = document.querySelectorAll('.item');
        // for循环绑定点击事件
        for (let i = 0; i < lis.length; i++) {
            // 设置索引号
            lis[i].setAttribute('index', i);
            lis[i].onclick = function () {
                // 将所有列表元素（lis）的类名设置为空字符串
                for (let i = 0; i < lis.length; i++) {
                    lis[i].className = '';
                }
                // 将当前激活的选项卡的类名设置为'current'
                this.className = 'current';
                // 2.显示内容栏,切换一组元素的显示与隐藏状态
                // 首先通过getAttribute('index')方法获取当前元素的index属性值
                let index = this.getAttribute('index');
                // 然后使用一个for循环遍历items数组
                for (let i = 0; i < items.length; i++) {
                    // 并将所有元素的display样式属性设置为none，即隐藏状态。
                    items[i].style.display = 'none';
                }
                // 最后将index对应元素的display样式属性设置为block，即显示状态
                items[index].style.display = 'block';
                // 这段代码的作用是根据当前元素的index属性值，切换相应元素的显示与隐藏状态。
            }
        }

总结

Tab栏的实现通过HTML编写盒子结构，CSS渲染尺寸外观，Javascript实现动态的切换效果。这里总结一下JS中用到的一些方法。
querySelector()返回文档中匹配指定 CSS 选择器的一个元素。
querySelectorAll ()返回文档中所有匹配指定 CSS 选择器的元素。
setAttribute(‘属性’,‘属性值’)设置当前元素的属性。
getAttribute()获取当前元素的属性。