這里分享一個(gè)前端必會(huì)的案例，是一個(gè)Tab欄的切換效果，除了Tab欄本身會(huì)被點(diǎn)擊切換之外，Tab本身也決定著其下方的內(nèi)容板塊的顯示。

如上圖所示，其實(shí)就是點(diǎn)擊上方的Tab欄然后Tab欄本身的樣式會(huì)被修改，然后其下方的內(nèi)容塊也會(huì)跟著顯示對(duì)應(yīng)的內(nèi)容。這樣的效果以及功能在前端的應(yīng)用是非常廣泛的，所以這可以說(shuō)是前端必會(huì)了。話不多說(shuō)下面先上代碼：

（這里就不上CSS樣式代碼了，個(gè)人根據(jù)需求進(jìn)行設(shè)置即可，li用float布局就好）

<div class='tab'><div class='tab_list'> <ul><li class='current'>商品介紹</li><!-- 默認(rèn)選中第一個(gè)li，current是決定紅底白字的樣式的 --><li>規(guī)格與包裝</li><li>售后保障</li><li>商品評(píng)價(jià)（50000）</li><li>手機(jī)社區(qū)</li> </ul></div><div class='tab_con'> <div style='display: block;'><!-- 這個(gè)item是默認(rèn)顯示的，因?yàn)樗械膇tem的display值都為none -->商品介紹模塊內(nèi)容 </div> <div class='item'>規(guī)格與包裝模塊內(nèi)容 </div> <div class='item'>售后保障模塊內(nèi)容 </div> <div class='item'>商品評(píng)價(jià)（50000）模塊內(nèi)容 </div> <div class='item'>手機(jī)社區(qū)模塊內(nèi)容 </div> </div></div>

下面是JS代碼：

<script>// 業(yè)務(wù)需求：點(diǎn)擊tab欄被點(diǎn)擊的tab欄擁有不一樣的樣式，其下方的div也要跟著點(diǎn)擊進(jìn)行切換實(shí)現(xiàn)內(nèi)容也跟著變動(dòng)的效果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); // 給每個(gè)li添加一個(gè)data-index的自定義屬性，值是它們自己在lis中的下標(biāo)，這個(gè)值主要讓我們判斷我們當(dāng)前點(diǎn)擊的是哪個(gè)li從而幫助我們后續(xù)修改它對(duì)應(yīng)的div的display值 lis[i].onclick = function () {// 1.第一步，用排他思想先做出用戶點(diǎn)擊誰(shuí)就給誰(shuí)class屬性賦值，注意其他沒(méi)有被點(diǎn)擊的都需要操作它們的class值為空，這就是干掉其他人留下我自己的排他思想for (var i = 0; i <lis.length; i++) { lis[i].className = ’’; // 用循環(huán)先將所有人（包括自己）的class類名為空}// 再單獨(dú)給自己修改class類名即留下我自己this.className = ’current’; // current這個(gè)類名的CSS樣式是已經(jīng)寫好了的// 然后上面的tab欄樣式好了就要處理第二步就是點(diǎn)擊誰(shuí)就讓其對(duì)應(yīng)的下屬div顯示出來(lái)，其他沒(méi)有被點(diǎn)擊的就隱藏，這里主要是需要先知道用戶點(diǎn)擊的是誰(shuí)，然后再給對(duì)象的div設(shè)置display為block即可。還是需用用排他思想來(lái)做哦// 第二步：根據(jù)點(diǎn)擊修改div的display屬性值var index = this.getAttribute(’index’); // 獲取當(dāng)前被點(diǎn)擊的li的indexfor (var i = 0; i < lis.length; i++) { // 用循環(huán)讓每個(gè)item的display都為none即干掉所有人 tabs[i].style.display = ’none’;}// 在tabs中鎖定li的index對(duì)應(yīng)的item單獨(dú)將它的display值改成block即留下我自己tabs[index].style.display = ’block’; }}</script>

這里再說(shuō)下實(shí)現(xiàn)步驟和思路（JS代碼里已有詳細(xì)分析）：首先功能大致分兩步：第一，對(duì)li標(biāo)簽的樣式修改，即用戶點(diǎn)擊哪個(gè)li該li的樣式隨著改變?yōu)榧t底白字，而它之外的其他li則是灰底黑字的默認(rèn)樣式；第二，上面的樣式修改了下面的文字模塊的內(nèi)容也要隨之改變，下面其實(shí)是放了與li一一對(duì)應(yīng)的div來(lái)裝文字內(nèi)容，只是它們的顯示是由Tab欄的li決定的，所以要實(shí)現(xiàn)div的文字隨著li變動(dòng)我們就需要知道當(dāng)前用戶點(diǎn)擊的是哪個(gè)li，這里用到的方法是 lis[i].setAttribute(’index’, i)，即用循環(huán)給每一個(gè)li標(biāo)簽添加一個(gè)自定義屬性index值等于lis（所有的li組成的數(shù)組）的索引，則根據(jù)index的值我們就能知道用戶點(diǎn)擊的是哪個(gè)li了，這樣我們?cè)贈(zèng)Q定是哪個(gè)div顯示出來(lái)就可以了。（建議看代碼結(jié)合注釋更好理解一些）

注意：這里再說(shuō)一下“排他思想”，即像這樣的列表或是表格之類的元素對(duì)象，一般可以統(tǒng)一獲取再存入一個(gè)數(shù)組中的元素對(duì)象，我們要控制當(dāng)前選中的該元素和其他沒(méi)有被選中的元素“有所不同”時(shí)，就常常設(shè)計(jì)“排他思想”，主要分兩步實(shí)現(xiàn)：1.用循環(huán)遍歷將這些所有的元素（包括選中的那個(gè)元素）都“干掉”，這一步主要是讓所有的元素“都一樣”誰(shuí)也沒(méi)有不同之處，然后再給我們選中的那個(gè)元素添加上我們想要給它的樣式或功能（即留下我自己）。這樣兩步加起來(lái)，就實(shí)現(xiàn)了選中誰(shuí)，誰(shuí)“不一樣”的效果。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。