JS-tab栏切换制作

JS-tab栏切换

tab栏切换制作

点击不同按钮切换相对应内容的显示

实现思路

1. HTML结构搭建，两个盒子，一个盒子有列表，4个li，一个显示内容；
2. CSS美化渲染，去掉小圆点list-style，左浮动，文字居中，行高和ul高度相等，背景及文字颜色等；
3. 点击需要出现的效果，文字及背景颜色的改变；
4. JS技术，先获取列表元素、文字及背景颜色改变的类元素、不同按钮对应不同内容元素；
5. 遍历每个li添加索引属性并绑定onclick事件；
6. 模块1使用 排他法 设置点击时出现文字及背景效果，我这里使用for双层循环；
7. 模块2切换显示不同内容，同上使用排他法，要先获取索引值；
8. 打开网页应设置默认点击第一个按钮显示第一个按钮内容。

JS实现方法

<script>
        //获取元素
        var tablist = document.querySelector('.tab_list');
        var lis = document.querySelectorAll(