js tab栏案例(JavaScript实现Tab栏切换特效)
js tab栏案例
JavaScript实现Tab栏切换特效这里分享一个前端必会的案例,是一个Tab栏的切换效果,除了Tab栏本身会被点击切换之外,Tab本身也决定着其下方的内容板块的显示。
运行效果展示:
如上图所示,其实就是点击上方的Tab栏然后Tab栏本身的样式会被修改,然后其下方的内容块也会跟着显示对应的内容。这样的效果以及功能在前端的应用是非常广泛的,所以这可以说是前端必会了。话不多说下面先上代码:
(这里就不上CSS样式代码了,个人根据需求进行设置即可,li用float布局就好)
HTML的结构:
<li class="tab"> <li class="tab_list"> <ul> <li class="current">商品介绍</li><!-- 默认选中第一个li,current是决定红底白字的样式的 --> <li>规格与包装</li> <li>售后保障</li> <li>商品评价(50000)</li> <li>手机社区</li> </ul> </li> <li class="tab_con"> <li class="item" style="display: block;"><!-- 这个item是默认显示的,因为所有的item的display值都为none --> 商品介绍模块内容 </li> <li class="item"> 规格与包装模块内容 </li> <li class="item"> 售后保障模块内容 </li> <li class="item"> 商品评价(50000)模块内容 </li> <li class="item"> 手机社区模块内容 </li> </li> </li>
下面是JS代码:
<script> // 业务需求:点击tab栏被点击的tab栏拥有不一样的样式,其下方的li也要跟着点击进行切换实现内容也跟着变动的效果 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从而帮助我们后续修改它对应的li的display值 lis[i].onclick = function () { // 1.第一步,用排他思想先做出用户点击谁就给谁class属性赋值,注意其他没有被点击的都需要操作它们的class值为空,这就是干掉其他人留下我自己的排他思想 for (var i = 0; i <lis.length; i++) { lis[i].className = ''; // 用循环先将所有人(包括自己)的class类名为空 } // 再单独给自己修改class类名即留下我自己 this.className = 'current'; // current这个类名的CSS样式是已经写好了的 // 然后上面的tab栏样式好了就要处理第二步就是点击谁就让其对应的下属li显示出来,其他没有被点击的就隐藏,这里主要是需要先知道用户点击的是谁,然后再给对象的li设置display为block即可。还是需用用排他思想来做哦 // 第二步:根据点击修改li的display属性值 var index = this.getAttribute('index'); // 获取当前被点击的li的index for (var i = 0; i < lis.length; i++) { // 用循环让每个item的display都为none即干掉所有人 tabs[i].style.display = 'none'; } // 在tabs中锁定li的index对应的item单独将它的display值改成block即留下我自己 tabs[index].style.display = 'block'; } } </script>
这里再说下实现步骤和思路(JS代码里已有详细分析):首先功能大致分两步:第一,对li标签的样式修改,即用户点击哪个li该li的样式随着改变为红底白字,而它之外的其他li则是灰底黑字的默认样式;第二,上面的样式修改了下面的文字模块的内容也要随之改变,下面其实是放了与li一一对应的li来装文字内容,只是它们的显示是由Tab栏的li决定的,所以要实现li的文字随着li变动我们就需要知道当前用户点击的是哪个li,这里用到的方法是 lis[i].setAttribute('index', i),即用循环给每一个li标签添加一个自定义属性index值等于lis(所有的li组成的数组)的索引,则根据index的值我们就能知道用户点击的是哪个li了,这样我们再决定是哪个li显示出来就可以了。(建议看代码结合注释更好理解一些)
注意:这里再说一下“排他思想”,即像这样的列表或是表格之类的元素对象,一般可以统一获取再存入一个数组中的元素对象,我们要控制当前选中的该元素和其他没有被选中的元素“有所不同”时,就常常设计“排他思想”,主要分两步实现:1.用循环遍历将这些所有的元素(包括选中的那个元素)都“干掉”,这一步主要是让所有的元素“都一样”谁也没有不同之处,然后再给我们选中的那个元素添加上我们想要给它的样式或功能(即留下我自己)。这样两步加起来,就实现了选中谁,谁“不一样”的效果。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
- angularjs数据绑定类指令及作用(详解Angular数据绑定及其实现方式)
- js事件冒泡与事件捕获(基于事件冒泡、事件捕获和事件委托详解)
- js三级联动说明(基于JavaScript实现省市联动效果)
- pjs计算方式(JS代码编译器Monaco使用方法)
- js回调函数
- js解除网页屏蔽(js检测标题与描述中的关键词发现就替换或跳转到别的页面)
- MVC JsonResult的用法
- js的逻辑关系和思路(js Proxy的原理详解)
- extjs中treepanel例子
- dede友情链接改为logo轮播教程(dedecms广告生成JS文件和JS调用-DEDE广告优化)
- ExtJs中XTemplate使用
- extjs中treepanel属性和方法
- 原生js实现轮播图代码(js实现轮播图制作方法)
- js编写简单网页计算器(js实现网页计算器)
- nodejs实现websocket服务端(Node.js+express+socket实现在线实时多人聊天室)
- MVC中JSON字符长度超出限制
- 春节放假几天(春节放假几天2023法定几天)
- 今天 3月13日,31年前,一个英雄少年感动了中国(今天3月13日31年前)
- 你好,新成理人丨成都理工大学2019级新生开学典礼隆重举行(新成理人丨成都理工大学2019级新生开学典礼隆重举行)
- 这部民警编演的红色话剧,讲述了一个不断追寻的故事(这部民警编演的红色话剧)
- 日本菜有什么好吃(日本菜有什么好吃的做法)
- 韩国泡菜做法(韩国泡菜的做法步骤)
热门推荐
- 纯css实现多级菜单(纯CSS实现可折叠树状菜单)
- vs项目依赖项
- css控制div上下移动(CSS鼠标悬浮DIV后显示DIV外的按钮解决方法)
- php微信公众号管理后台(php实现微信公众号创建自定义菜单功能的实例代码)
- dedecms怎么添加alt标签(dedecms 取消栏目列表页文章标题设置推荐后的加粗)
- 微信小程序js 抽奖概率(小程序实现筛子抽奖)
- thinkphp3.2.3 接口开发(ThinkPHP3.2.3框架Memcache缓存使用方法实例总结)
- jquery中one()的用法
- php 常见的设计模式(PHP中常用的三种设计模式详解单例模式、工厂模式、观察者模式)
- 浏览器怎么登录宝塔linux面板(宝塔Linux面板如何绑定域名?登录地址是多少?)