JavaScript

#JavaScript| 来源: 网络整理| 查看: 265

这里分享一个前端必会的案例，是一个Tab栏的切换效果，除了Tab栏本身会被点击切换之外，Tab本身也决定着其下方的内容板块的显示。

运行效果展示：

如上图所示，其实就是点击上方的Tab栏然后Tab栏本身的样式会被修改，然后其下方的内容块也会跟着显示对应的内容。这样的效果以及功能在前端的应用是非常广泛的，所以这可以说是前端必会了。话不多说下面先上代码：

（这里就不上CSS样式代码了，个人根据需求进行设置即可，li用float布局就好）

HTML的结构：商品介绍规格与包装售后保障商品评价（50000）手机社区商品介绍模块内容规格与包装模块内容售后保障模块内容商品评价（50000）模块内容手机社区模块内容下面是JS代码： // 业务需求：点击tab栏被点击的tab栏拥有不一样的样式，其下方的div也要跟着点击进行切换实现内容也跟着变动的效果 var tab_list = document.querySelector('.tab_list'); var lis = tab_list.querySelectorAll('li'); var tabs = document.querySelectorAll('.item'); for (var i = 0; i < lis.length; i++) { lis[i].setAttribute('data-index', i); // 给每个li添加一个data-index的自定义属性，值是它们自己在lis中的下标，这个值主要让我们判断我们当前点击的是哪个li从而帮助我们后续修改它对应的div的display值 lis[i].onclick = function () { // 1.第一步，用排他思想先做出用户点击谁就给谁class属性赋值，注意其他没有被点击的都需要操作它们的class值为空，这就是干掉其他人留下我自己的排他思想 for (var i = 0; i

【本文地址】

公司简介

联系我们