电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

JavaScript實現Tab欄切換特效

瀏覽:82日期:2023-05-31 17:55:43

這里分享一個前端必會的案例,是一個Tab欄的切換效果,除了Tab欄本身會被點擊切換之外,Tab本身也決定著其下方的內容板塊的顯示。

運行效果展示:

JavaScript實現Tab欄切換特效

JavaScript實現Tab欄切換特效

如上圖所示,其實就是點擊上方的Tab欄然后Tab欄本身的樣式會被修改,然后其下方的內容塊也會跟著顯示對應的內容。這樣的效果以及功能在前端的應用是非常廣泛的,所以這可以說是前端必會了。話不多說下面先上代碼:

(這里就不上CSS樣式代碼了,個人根據需求進行設置即可,li用float布局就好)

HTML的結構:

<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 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的indexfor (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.用循環遍歷將這些所有的元素(包括選中的那個元素)都“干掉”,這一步主要是讓所有的元素“都一樣”誰也沒有不同之處,然后再給我們選中的那個元素添加上我們想要給它的樣式或功能(即留下我自己)。這樣兩步加起來,就實現了選中誰,誰“不一樣”的效果。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持好吧啦網。

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 新能源汽车电机定转子合装机 - 电机维修设备 - 睿望达 | 烽火安全网_加密软件、神盾软件官网| 高低温万能试验机_拉力试验机_拉伸试验机-馥勒仪器科技(上海)有限公司 | 药品/药物稳定性试验考察箱-埃里森仪器设备(上海)有限公司 | 大数据营销公司_舆情监测软件_上海SEO公司-文军营销官网 | 帽子厂家_帽子工厂_帽子定做_义乌帽厂_帽厂_制帽厂 | 英国公司注册-新加坡公司注册-香港公司开户-离岸公司账户-杭州商标注册-杭州优创企业 | 衬四氟_衬氟储罐_四氟储罐-无锡市氟瑞特防腐科技有限公司 | 分子精馏/精馏设备生产厂家-分子蒸馏工艺实验-新诺舜尧(天津)化工设备有限公司 | 哲力实业_专注汽车涂料汽车漆研发生产_汽车漆|修补油漆品牌厂家 长沙一级消防工程公司_智能化弱电_机电安装_亮化工程专业施工承包_湖南公共安全工程有限公司 | 密集架|电动密集架|移动密集架|黑龙江档案密集架-大量现货厂家销售 | 无线讲解器-导游讲解器-自助讲解器-分区讲解系统 品牌生产厂家[鹰米讲解-合肥市徽马信息科技有限公司] | 真空粉体取样阀,电动楔式闸阀,电动针型阀-耐苛尔(上海)自动化仪表有限公司 | 外观设计_设备外观设计_外观设计公司_产品外观设计_机械设备外观设计_东莞工业设计公司-意品深蓝 | HEYL硬度计量泵-荧光法在线溶解氧仪-净时测控技术(上海)有限公司 | 蔡司三坐标-影像测量机-3D扫描仪-蔡司显微镜-扫描电镜-工业CT-ZEISS授权代理商三本工业测量 | 压力控制器,差压控制器,温度控制器,防爆压力控制器,防爆温度控制器,防爆差压控制器-常州天利智能控制股份有限公司 | 青岛侦探_青岛侦探事务所_青岛劝退小三_青岛调查出轨取证公司_青岛婚外情取证-青岛探真调查事务所 | 股票入门基础知识_股票知识_股票投资大师_格雷厄姆网 | 青州开防盗门锁-配汽车芯片钥匙-保险箱钥匙-吉祥修锁店 | 水环真空泵厂家,2bv真空泵,2be真空泵-淄博真空设备厂 | jrs高清nba(无插件)直播-jrs直播低调看直播-jrs直播nba-jrs直播 上海地磅秤|电子地上衡|防爆地磅_上海地磅秤厂家–越衡称重 | 智能风向风速仪,风速告警仪,数字温湿仪,综合气象仪(气象五要素)-上海风云气象仪器有限公司 | 合肥防火门窗/隔断_合肥防火卷帘门厂家_安徽耐火窗_良万消防设备有限公司 | 香港新时代国际美容美发化妆美甲培训学校-26年培训经验,值得信赖! | 针焰试验仪,灼热丝试验仪,漏电起痕试验仪,水平垂直燃烧试验仪 - 苏州亚诺天下仪器有限公司 | 医疗仪器模块 健康一体机 多参数监护仪 智慧医疗仪器方案定制 血氧监护 心电监护 -朗锐慧康 | 生产自动包装秤_颗粒包装秤_肥料包装秤等包装机械-郑州鑫晟重工科技有限公司 | 生产自动包装秤_颗粒包装秤_肥料包装秤等包装机械-郑州鑫晟重工科技有限公司 | 贵州科比特-防雷公司厂家提供贵州防雷工程,防雷检测,防雷接地,防雷设备价格,防雷产品报价服务-贵州防雷检测公司 | 点焊机-缝焊机-闪光对焊机-电阻焊设备生产厂家-上海骏腾发智能设备有限公司 | 【官网】博莱特空压机,永磁变频空压机,螺杆空压机-欧能优 | 深圳工程师职称评定条件及流程_深圳职称评审_职称评审-职称网 | 快干水泥|桥梁伸缩缝止水胶|伸缩缝装置生产厂家-广东广航交通科技有限公司 | 山东活动策划|济南活动公司|济南公关活动策划-济南锐嘉广告有限公司 | 包装盒厂家_纸盒印刷_礼品盒定制-济南恒印包装有限公司 | 商秀—企业短视频代运营_抖音企业号托管| 防水套管厂家_刚性防水套管_柔性防水套管_不锈钢防水套管-郑州中泰管道 | 【直乐】河北石家庄脊柱侧弯医院_治疗椎间盘突出哪家医院好_骨科脊柱外科专业医院_治疗抽动症/关节病骨伤权威医院|排行-直乐矫形中医医院 | 磁力去毛刺机_去毛刺磁力抛光机_磁力光饰机_磁力滚抛机_精密金属零件去毛刺机厂家-冠古科技 | 升降机-高空作业车租赁-蜘蛛车-曲臂式伸缩臂剪叉式液压升降平台-脚手架-【普雷斯特公司厂家】 |