用JS如何实现Tab切换下方的内容板块跟随的效果
Admin 2022-07-16 群英技术资�
这里分享一个前端必会的案例,是一个Tab栏的切换效果,除了Tab栏本身会被点击切换之外,Tab本身也决定着其下方的内容板块的显示�
如上图所示,其实就是点击上方的Tab栏然后Tab栏本身的样式会被修改,然后其下方的内容块也会跟着显示对应的内容。这样的效果以及功能在前端的应用是非常广泛的,所以这可以说是前端必会了。话不多说下面先上代码:
(这里就不上CSS样式代码了,个人根据需求进行设置即可,li用float布局就好�
<div class="tab"> <div class="tab_list"> <ul> <li class="current">商品介绍</li><!-- 默认选中第一个li,current是决定红底白字的样式� --> <li>规格与包�</li> <li>售后保障</li> <li>商品评价�50000�</li> <li>手机社区</li> </ul> </div> <div class="tab_con"> <div class="item" style="display: block;"><!-- 这个item是默认显示的,因为所有的item的display值都为none --> 商品介绍模块内容 </div> <div class="item"> 规格与包装模块内� </div> <div class="item"> 售后保障模块内容 </div> <div class="item"> 商品评价�50000)模块内� </div> <div class="item"> 手机社区模块内容 </div> </div> </div>
下面是JS代码�
<script> // 业务需求:点击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 <lis.length; i++) { lis[i].className = ''; // 用循环先将所有人(包括自己)的class类名为空 } // 再单独给自己修改class类名即留下我自己 this.className = 'current'; // current这个类名的CSS样式是已经写好了� // 然后上面的tab栏样式好了就要处理第二步就是点击谁就让其对应的下属div显示出来,其他没有被点击的就隐藏,这里主要是需要先知道用户点击的是谁,然后再给对象的div设置display为block即可。还是需用用排他思想来做� // 第二步:根据点击修改div的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一一对应的div来装文字内容,只是它们的显示是由Tab栏的li决定的,所以要实现div的文字随着li变动我们就需要知道当前用户点击的是哪个li,这里用到的方法� lis[i].setAttribute('index', i)�即用循环给每一个li标签添加一个自定义属性index值等于lis(所有的li组成的数组)的索引,则根据index的值我们就能知道用户点击的是哪个li了,这样我们再决定是哪个div显示出来就可以了。(建议看代码结合注释更好理解一些)
注意�这里再说一下�排他思想”,即像这样的列表或是表格之类的元素对象,一般可以统一获取再存入一个数组中的元素对象,我们要控制当前选中的该元素和其他没有被选中的元素“有所不同”时,就常常设计“排他思想”,主要分两步实现:1.用循环遍历将这些所有的元素(包括选中的那个元素)都“干掉”,这一步主要是让所有的元素“都一样”谁也没有不同之处,然后再给我们选中的那个元素添加上我们想要给它的样式或功能(即留下我自己)。这样两步加起来,就实现了选中谁,谁“不一样”的效果�
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
这篇文章主要介绍了js 标签语法使用,在 JavaScript 中提供了标签语句,用于标记指定的代码块,便于跳转到指定的位置。本文来记录一下标签语句的使用方法,需要的朋友可以参考一�
node.js中有中文乱码怎么�?很多朋友都有遇到过node.Js中出现中文乱码的问题,那么遇到这样的情况我们该怎样解决呢?下面就给大家来分享一个方法,需要的朋友可以参考�
本文主要介绍了js下划线和驼峰互相转换的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一�
这篇文章主要为大家介绍了React � Redux的关系,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
本文给大家介绍vue3组合API中setup� ref、reactive的用法,初步了解reactive的使用及具体用法,通过示例代码给大家介绍的非常详细,需要的朋友参考下�
推荐内容
联系我们
24小时售后 � 24小时售后TEL�0668-2555666 售前咨询TEL�400-678-4567 投诉建议TEL�0668-2555999 投诉建议邮箱:t[email protected] 信息安全TEL�0668-2555118 域名空间客服 � 公司总机�0668-2555555 公司传真�0668-2555000Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所� 茂名市群英网络有限公�
增值电信经营许可证 : B1.B2-20140078