昨天在慕課網(wǎng)接觸到了一個 javascript 基礎(chǔ)教程，教程的最后要求完成選項卡切換的效果。效果圖如下：
為了加強(qiáng)自己的記憶，同時也鼓勵自己繼續(xù)學(xué)習(xí)，所以試著寫文章記錄一下。
首先，考慮整個選項卡的布局。整個選項卡從大的方向看只有兩部分，一部分是選項卡標(biāo)題；另一部分則是選項卡的內(nèi)容。選項卡標(biāo)題可以用無序列表標(biāo)簽 ul 實現(xiàn)，選項卡內(nèi)容則可以放在一個 div 標(biāo)簽里。嗯，布局決定好了，現(xiàn)在就可以往 html 文件里寫內(nèi)容啦~
現(xiàn)在的效果圖是這樣的，很丑
所以下一步就是利用 css 美化頁面啦~
先將 css 文件鏈接到 html 文件中?，F(xiàn)在開始真正地編輯 css 代碼了。首先，需要去掉列表前面的原點，list-style: none；把 display 屬性設(shè)置為 inline-block，這樣不僅可以將內(nèi)聯(lián)元素轉(zhuǎn)換為塊狀元素從而設(shè)置寬高，而且還可以避免因設(shè)置 padding 屬性導(dǎo)致元素寬高發(fā)生變化的問題；為了讓三個標(biāo)題水平排列，需要將 float 屬性設(shè)置為 left,即向左浮動；然后再加上一個邊框；但現(xiàn)在字體還沒有居中顯示，顯得不好看，于是用 text-align: center? 讓字體水平居中，line-height: 30px 讓字體垂直居中。
選項卡標(biāo)題欄樣式設(shè)置就基本完成了，但選項卡內(nèi)容部分看起來還是有點奇怪，所以下面開始選項卡內(nèi)容部分的樣式設(shè)置。首先，我們希望內(nèi)容部分位于標(biāo)題的正下方，而現(xiàn)在的情況是有一部分內(nèi)容在標(biāo)題的右邊，看起來很奇怪，這是由標(biāo)題卡的 float 屬性引起的，在內(nèi)容部分清除浮動就可以了。然后再完成字體的美化，設(shè)置邊框……
現(xiàn)在的效果圖與最終的效果圖很像了，但我們希望最開始只顯示一段內(nèi)容，所以剩下的兩段需要隱藏起來。于是使用 display:none 來實現(xiàn)隱藏效果。
現(xiàn)在靜態(tài)布局已經(jīng)全部完成，剩下的切換效果需要用 javascript 來完成。首先，我們希望當(dāng)鼠標(biāo)放在某個標(biāo)題上時，顯示出與標(biāo)題相關(guān)的內(nèi)容，同時標(biāo)題的樣式還可以發(fā)生一些變化，讓標(biāo)題更加顯眼，而當(dāng)鼠標(biāo)移開的時候，標(biāo)題的樣式又會恢復(fù)為原來的樣子。所以我們需要寫兩個函數(shù)，分別綁在 onmouseover 和 onmouseout 上。
最后將 js 文件鏈接到 html 代碼里。（js 代碼寫得有些繁瑣，應(yīng)該可以用更少的代碼來實現(xiàn)，但現(xiàn)在我還不會……）
整個選項卡切換效果就完成了，繼續(xù)加油！?。?/p>
