JS案例-状态栏/导航栏/选项卡切换

style只做最基础的样式。让页面正常显示即可，我们的目标是完成js部分代码

页面布局如下：

 1  
 2         
 3             
 4                 商品介绍
 5                 规格和包装
 6                 售后保障
 7                 商品评价
 8                 手机社区
 9             
10         
11         
12         
13             
14                 商品介绍模块内容
15             
16             
17                 规格和包装内容
18             
19             
20                 售后保障内容
21             
22             
23                 商品评价内容
24             
25             
26                 手机社区内容
27             
28 
29 
30         
31

网页效果运行：

目标功能要求：点击不同的选项卡，有当前选项卡的选中效果

选项卡下方显示相对应的内容，例如点击了 ‘ 售后保障 ’

选项卡下方显示跟 ‘售后保障’ 有关的内容

实现思路：

分为两大模块实现，先实现选项卡上方选中效果

在本案例中，我们是通过选中的选项添加 .current 这个类实现的

1         // 获取元素.拿到父亲
2         var tab_list = document.querySelector('.tab_list');
3         // 通过父亲拿到孩子
4         var lis = tab_list.querySelectorAll('li');

然后for循环绑定点击事件，这里用到 排他思想：清除所有人的类，然后只留下自己

 for (var i = 0; i < lis.length; i++) {
  lis[i].onclick = function () {
                // 干掉所有人，其余的li清除class这个类
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = '';

                }
                // 留下自己
                this.className = 'current';
}

到这里，第一部分已经完成

第二部分：获取点击元素的索引（通过自定义属性setAttribute实现）

语法如下：

setAttribute(name, value)

这里写在for循环里面

 lis[i].setAttribute('index', i);

然后可以将值赋值给一个index变量

     // 得到点击的li的自定义索引
    var index = this.getAttribute('index');

最后将相对应的元素的display设置为block即可（或者添加一个类，这个类是用来控制元素的显示隐藏的）

 items[index].style.display = 'block';

最后，贴出本案例的所有代码，如下：

个人成长

JS案例-状态栏/导航栏/选项卡切换

相关

标签