Tab 選項(xiàng)卡切換效果在現(xiàn)如今的網(wǎng)頁中，運(yùn)用的也是比較多的，包括點(diǎn)擊切換、滑動(dòng)切換、延遲切換、自動(dòng)切換等多種效果，在這篇博文里，我們是通過原生 JavaScript 來實(shí)現(xiàn) Tab 點(diǎn)擊切換的效果
成都創(chuàng)新互聯(lián)是專業(yè)的阿合奇網(wǎng)站建設(shè)公司，阿合奇接單;提供網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站設(shè)計(jì),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行阿合奇網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!
1. 功能實(shí)現(xiàn)
html 部分
第一個(gè)Nian糕第二個(gè)Nian糕第三個(gè)Nian糕
css 部分
重慶分公司
重慶分公司
div {
display: none;
width: 155px;
height: 100px;
border: 1px solid #000;
}接下來是 JS 部分，根據(jù)每一步要實(shí)現(xiàn)的功能，進(jìn)而轉(zhuǎn)換成代碼，每當(dāng)我們要實(shí)現(xiàn)一個(gè)效果的時(shí)候，先不要急著去敲代碼，而是先思考要怎么去實(shí)現(xiàn)，結(jié)構(gòu)是什么樣的，某個(gè)功能需要用到什么事件等等，自己在腦海里把整個(gè)流程過一遍，再去把每一步的邏輯轉(zhuǎn)換成代碼
a. 獲取元素
var btnList = document.getElementsByTagName("button");
var divList = document.getElementsByTagName("div");注釋： document.getElementsByTagName 返回的是一個(gè)[類數(shù)組對(duì)象]，可以使用數(shù)組的方法對(duì)其進(jìn)行處理，但類數(shù)組對(duì)象并不具有數(shù)組所具有的方法
b. 給元素綁定點(diǎn)擊事件
//第一個(gè)按鈕的點(diǎn)擊事件
btnList[0].onclick = function () {
btnList[0].style.color = "#fff";
btnList[0].style.backgroundColor = "#f60";
btnList[1].style.color = "";
btnList[1].style.backgroundColor = "";
btnList[2].style.color = "";
btnList[2].style.backgroundColor = "";
divList[0].style.display = "block";
divList[1].style.display = "none";
divList[2].style.display = "none";
}
//第二個(gè)按鈕的點(diǎn)擊事件
btnList[1].onclick = function () {
btnList[0].style.color = "";
btnList[0].style.backgroundColor = "";
btnList[1].style.color = "#fff";
btnList[1].style.backgroundColor = "#f60";
btnList[2].style.color = "";
btnList[2].style.backgroundColor = "";
divList[0].style.display = "none";
divList[1].style.display = "block";
}
//第三個(gè)按鈕的點(diǎn)擊事件
btnList[2].onclick = function () {
btnList[0].style.color = "";
btnList[0].style.backgroundColor = "";
btnList[1].style.color = "";
btnList[1].style.backgroundColor = "";
btnList[2].style.color = "#fff";
btnList[2].style.backgroundColor = "#f60";
divList[0].style.display = "none";
divList[1].style.display = "none";
divList[2].style.display = "block";
}現(xiàn)在我們已經(jīng)實(shí)現(xiàn)了一個(gè) Tab 切換的效果了，來看一下效果
雖然很簡(jiǎn)陋，但已經(jīng)達(dá)到我們想要的效果了，讀者可根據(jù)自己想要的樣式來設(shè)置 CSS，接下來我們要做的就是，對(duì) JS 代碼進(jìn)行優(yōu)化
2. 優(yōu)化
a. 獲取元素
var btnList = document.getElementsByTagName("button");
var divList = document.getElementsByTagName("div");b. 給每一個(gè) button 元素綁定點(diǎn)擊事件
for(var i = 0; i < btnList.length; i++ ) {
btnList[i].index = i; //給每個(gè)按鈕添加index屬性，標(biāo)記是第幾個(gè)按鈕
btnList[i].onclick = function() {
for(var j = 0; j < btnList.length; j++) {
//將所有的按鈕樣式去掉，塊隱藏
btnList[j].style.color = "";
btnList[j].style.backgroundColor = "";
divList[j].style.display = "none";
}
//給點(diǎn)擊的按鈕添加樣式，對(duì)應(yīng)的塊顯示
this.style.color = "#fff";
this.style.backgroundColor = "#f60";
divList[this.index].style.display = "block";
}
}index 返回字符位置，它是被搜索字符串中第一個(gè)成功匹配的開始位置，從零開始
this 是 Javascript 的一個(gè)關(guān)鍵字，它代表函數(shù)運(yùn)行時(shí)，自動(dòng)生成的一個(gè)內(nèi)部對(duì)象，只能在函數(shù)內(nèi)部使用 this，關(guān)于 this 的值，會(huì)跟隨函數(shù)使用場(chǎng)景的不同而發(fā)生變化，但是我們只需要記住一個(gè)原則就可以了，this 指的是調(diào)用函數(shù)的那個(gè)對(duì)象
在這里 this 指向?qū)?yīng)的點(diǎn)擊按鈕，我們可以通過控制臺(tái)打印來看到 this 所輸出的內(nèi)容
3. Let 命令
ES 6 中新增了 let 命令，用來聲明變量，其用法類似于 var，但是所聲明的變量，只在 let 命令所在的代碼塊內(nèi)有效
在上面的代碼中，我們?cè)诖a塊里，分別用 var 和 let 聲明了兩個(gè)變量，接著在代碼塊內(nèi)外打印這兩個(gè)變量，可以看到，var 聲明的變量返回了正確的值，代碼塊內(nèi)打印 let 聲明的變量返回了正確的值，而在代碼塊外打印 let 聲明的變量報(bào)錯(cuò)，這表明，let 聲明的變量只在它所在的代碼塊有效
上面代碼中，變量 i 是 var 聲明的，在全局范圍內(nèi)都有效，所以全局只有一個(gè)變量 i，每一次循環(huán)，變量 i 的值都會(huì)發(fā)生改變，而循環(huán)內(nèi)被賦給數(shù)組 a 的 function 在運(yùn)行時(shí)，會(huì)通過閉包讀到這同一個(gè)變量 i，導(dǎo)致最后輸出的是最后一輪的 i 的值，也就是 10，而如果使用 let，聲明的變量?jī)H在塊級(jí)作用域內(nèi)有效，最后輸出的是 6
a. 獲取元素
var btnList = document.getElementsByTagName("button");
var divList = document.getElementsByTagName("div");b. 給每一個(gè) button 元素綁定點(diǎn)擊事件
for(let i = 0; i < btnLists.length; i++) {
btnLists[i].onclick = function() {
for(var j = 0;j < btnLists.length;j++){
btnLists[j].style.color="";
btnLists[j].style.backgroundColor="";
divLists[j].style.display="none";
}
this.style.color = "yellow";
this.style.backgroundColor="#f60";
divLists[i].style.display="block";
}
}同樣的，我們也是控制臺(tái)來打印一下 i 的值
End of File
行文過程中出現(xiàn)錯(cuò)誤或不妥之處在所難免，希望大家能夠給予指正，以免誤導(dǎo)更多人，也希望大家多多支持創(chuàng)新互聯(lián)。
