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

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

JavaScript實現Tab欄切換特效

瀏覽:81日期: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
相關文章:
主站蜘蛛池模板: 仿清水混凝土_清水混凝土装修_施工_修饰_保护剂_修补_清水混凝土修复-德州忠岭建筑装饰工程 | 电机修理_二手电机专家-河北豫通机电设备有限公司(原石家庄冀华高压电机维修中心) | 国产离子色谱仪,红外分光测油仪,自动烟尘烟气测试仪-青岛埃仑通用科技有限公司 | 物联网卡_物联网卡购买平台_移动物联网卡办理_移动联通电信流量卡通信模组采购平台? | 尊享蟹太太美味,大闸蟹礼卡|礼券|礼盒在线预订-蟹太太官网 | 扫地车厂家-山西洗地机-太原电动扫地车「大同朔州吕梁晋中忻州长治晋城洗地机」山西锦力环保科技有限公司 | 二手光谱仪维修-德国OBLF光谱仪|进口斯派克光谱仪-热电ARL光谱仪-意大利GNR光谱仪-永晖检测 | 网带通过式抛丸机,,网带式打砂机,吊钩式,抛丸机,中山抛丸机生产厂家,江门抛丸机,佛山吊钩式,东莞抛丸机,中山市泰达自动化设备有限公司 | elisa试剂盒-PCR试剂盒「上海谷研实业有限公司」 | 湖南自考_湖南自学考试网 | 武汉高低温试验机-现货恒温恒湿试验箱-高低温湿热交变箱价格-湖北高天试验设备 | 合肥办公室装修 - 合肥工装公司 - 天思装饰| 利浦顿蒸汽发生器厂家-电蒸汽发生器/燃气蒸汽发生器_湖北利浦顿热能科技有限公司官网 | 天然气分析仪-液化气二甲醚分析仪|传昊仪器 | 进口便携式天平,外校_十万分之一分析天平,奥豪斯工业台秤,V2000防水秤-重庆珂偌德科技有限公司(www.crdkj.com) | 嘉兴泰东园林景观工程有限公司_花箱护栏 | 氧化铁红厂家-淄博宗昂化工 | IWIS链条代理-ALPS耦合透镜-硅烷预处理剂-上海顶楚电子有限公司 lcd条形屏-液晶长条屏-户外广告屏-条形智能显示屏-深圳市条形智能电子有限公司 | 自动部分收集器,进口无油隔膜真空泵,SPME固相微萃取头-上海楚定分析仪器有限公司 | 赛默飞Thermo veritiproPCR仪|ProFlex3 x 32PCR系统|Countess3细胞计数仪|371|3111二氧化碳培养箱|Mirco17R|Mirco21R离心机|仟诺生物 | 撕碎机_轮胎破碎机_粉碎机_回收生产线厂家_东莞华达机械有限公司 | 净化板-洁净板-净化板价格-净化板生产厂家-山东鸿星新材料科技股份有限公司 | 交变/复合盐雾试验箱-高低温冲击试验箱_安奈设备产品供应杭州/江苏南京/安徽马鞍山合肥等全国各地 | 防渗土工膜|污水处理防渗膜|垃圾填埋场防渗膜-泰安佳路通工程材料有限公司 | 全自动过滤器_反冲洗过滤器_自清洗过滤器_量子除垢环_量子环除垢_量子除垢 - 安士睿(北京)过滤设备有限公司 | 专业的新乡振动筛厂家-振动筛品质保障-环保振动筛价格—新乡市德科筛分机械有限公司 | 寮步纸箱厂_东莞纸箱厂 _东莞纸箱加工厂-东莞市寮步恒辉纸制品厂 | 冷却塔厂家_冷却塔维修_冷却塔改造_凉水塔配件填料公司- 广东康明节能空调有限公司 | 汽车润滑油厂家-机油/润滑油代理-高性能机油-领驰慧润滑科技(河北)有限公司 | 哲力实业_专注汽车涂料汽车漆研发生产_汽车漆|修补油漆品牌厂家 长沙一级消防工程公司_智能化弱电_机电安装_亮化工程专业施工承包_湖南公共安全工程有限公司 | 27PR跨境电商导航 | 专注外贸跨境电商| 建大仁科-温湿度变送器|温湿度传感器|温湿度记录仪_厂家_价格-山东仁科 | 热回收盐水机组-反应釜冷水机组-高低温冷水机组-北京蓝海神骏科技有限公司 | 临时厕所租赁_玻璃钢厕所租赁_蹲式|坐式厕所出租-北京慧海通 | 深圳装修_店面装修设计_餐厅设计_装修全包价格-尚泰装饰设计 | 交流伺服电机|直流伺服|伺服驱动器|伺服电机-深圳市华科星电气有限公司 | 成都茶楼装修公司 - 会所设计/KTV装修 - 成都朗煜装饰公司 | 郑州宣传片拍摄-TVC广告片拍摄-微电影短视频制作-河南优柿文化传媒有限公司 | 东莞韩创-专业绝缘骨架|马达塑胶零件|塑胶电机配件|塑封电机骨架厂家 | 缝纫客| 北京律师事务所_房屋拆迁律师_24小时免费法律咨询_云合专业律师网 |