tab栏切换制作方法

1.创建HTML布局

<div>//整体盒子
        <div class="nav">
            <ul>
                <li class="first">商品介绍</li>
                <li>规格包装</li>
                <li>售后保障</li>
                <li>客户评价(500+)</li>

            </ul>
        </div>//tab 导航栏
        <div class="tb_list">
            <div class="item" style="display: block;">
                1分辨率：1920*1080(FHD) <br>后置摄像头：1200万像素<br> 前置摄像头：500万像素<br>核数：其他 <br>频率：以官网信息为准<br> 品牌：AppleiPhone 6s Plus <br>商品编号：1861098 <br>商品毛重:0.51kg <br>商品产地：中国大陆 <br>热点：指纹识别，Apple Pay, 金属机身，拍照神器 <br>系统：苹果（IOS） <br>像素：1000-1600万 <br>机身内存：64GB
            </div>
            <div class="item">
                2分辨率：1920*1080(FHD) <br>后置摄像头：1200万像素<br> 前置摄像头：500万像素<br>核数：其他 <br>频率：以官网信息为准<br> 品牌：AppleiPhone 6s Plus <br>商品编号：1861098 <br>商品毛重:0.51kg <br>商品产地：中国大陆 <br>热点：指纹识别，Apple Pay, 金属机身，拍照神器 <br>系统：苹果（IOS） <br>像素：1000-1600万 <br>机身内存：64GB
            </div>
            <div class="item">
                3分辨率：1920*1080(FHD) <br>后置摄像头：1200万像素<br> 前置摄像头：500万像素<br>核数：其他 <br>频率：以官网信息为准<br> 品牌：AppleiPhone 6s Plus <br>商品编号：1861098 <br>商品毛重:0.51kg <br>商品产地：中国大陆 <br>热点：指纹识别，Apple Pay, 金属机身，拍照神器 <br>系统：苹果（IOS） <br>像素：1000-1600万 <br>机身内存：64GB
            </div>
            <div class="item">
                4分辨率：1920*1080(FHD) <br>后置摄像头：1200万像素<br> 前置摄像头：500万像素<br>核数：其他 <br>频率：以官网信息为准<br> 品牌：AppleiPhone 6s Plus <br>商品编号：1861098 <br>商品毛重:0.51kg <br>商品产地：中国大陆 <br>热点：指纹识别，Apple Pay, 金属机身，拍照神器 <br>系统：苹果（IOS） <br>像素：1000-1600万 <br>机身内存：64GB
            </div>
        </div>
    </div>//tab显示栏

2.获取页面元素

var items = document.querySelectorAll('.item')//获取tab显示栏
var lis = document.querySelectorAll('li')//获取tab标题栏

3.代码实现tab栏切换（方法一）

for (let i = 0; i < lis.length; i++) {//遍历标题元素
            lis[i].onclick = function() {//为标题创建点击事件
                for (let i = 0; i < lis.length; i++) {//遍历标题元素实现css切换
                    lis[i].classList = ''
                }
                this.className = 'first';
                var j = i //定义一个变量j，实现标题与显示模块索引对应
                for (let i = 0; i < items.length; i++) {
                    items[i].style.display = 'none'
	  					//对所有的显示模块遍历清除显示
                }
                items[j].style.display = 'block'//对点击的对应显示模块实现显示
            }

        }

4.代码实现tab栏切换（方法二）

 for (let i = 0; i < lis.length; i++) {
            lis[i].setAttribute('index', i) //给所有标题添加属性
            lis[i].onclick = function() {
                for (let i = 0; i < lis.length; i++) {
                    lis[i].classList = ''
                }
                this.className = 'first';
                // var j = i
                for (let i = 0; i < items.length; i++) {
                    items[i].style.display = 'none'
                }
                var index = lis[i].getAttribute('index') //获取索引号
                console.log(index);
                items[index].style.display = 'block' //对相应的显示模块给block
            }

        }

总结

两种方法思路相差不大都是定义一个变量进行对应