api小案例：实现导航栏切换_小程序原生api切换导航栏-CSDN博客

本文链接：https://blog.csdn.net/qq_45052409/article/details/107647604

页面效果：
在这里插入图片描述
小伙伴们可自行添加css样式

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
               介绍
            </div>
            <div class="item">
                包装模块内容
            </div>
            <div class="item">
                售后
            </div>
            <div class="item">
                商品评价
            </div>
            <div class="item">
                社区
            </div>

        </div>
    </div>
    <script>
        // 1.获取元素
        var arr = document.querySelector('.tab_list'); // 获取最上面的div
        var str = arr.querySelectorAll('li'); // 获取 div 里面所有的 li

        var nav = document.querySelectorAll('.item'); // 选中所有的 .item

        for (var i = 0; i < str.length; i++) {
            // 添加一个自定义属性   
            // setAttribute('属性名'，值)  设置属性：如果该属性已存在就更新属性值，如果没有该属性就添加一个新的属性
            str[i].setAttribute('index', i) // 在每一个 li 里面都添加一个 自定义属性
            // 事件类型(点击事件) 所有的li
            str[i].onclick = function () {
                // 当点击li的时候，改变他的背景颜色（排他思想，先干掉所有的 包括自己）
                for (var i = 0; i < str.length; i++) {
                    // 因为原来已经设置过 属性，只需要将属性 为空 即可
                    str[i].className = '';
                }
                // 复活自己 这里可以直接用 this ：事件函数的 调用者
                this.className = 'current';

                // 当点击上面的li改变背景颜色后，下面的内容也要随之改变
                // 得到属性
                var index = this.getAttribute('index')
                // 先让所有的内容都隐藏  然后再点击的时候 显示(排他思想)
                for (var i = 0; i < nav.length; i++) {
                    // 让里面的 文本 隐藏
                    nav[i].style.display = 'none'
                }
                // 复活自己 显示自己  
                /*
                    这里要实现的是：当点击上面的 li 时，要随之改变相应的 内容，这里要用到 自定义属性 index
                */
                nav[index].style.display = 'block';
            }
        }

    </script>