昨天在慕課網(wǎng)接觸到了一個 javascript 基礎(chǔ)教程韧掩，教程的最后要求完成選項(xiàng)卡切換的效果。效果圖如下：
為了加強(qiáng)自己的記憶窖铡，同時也鼓勵自己繼續(xù)學(xué)習(xí)疗锐，所以試著寫文章記錄一下。
首先费彼，考慮整個選項(xiàng)卡的布局滑臊。整個選項(xiàng)卡從大的方向看只有兩部分，一部分是選項(xiàng)卡標(biāo)題箍铲；另一部分則是選項(xiàng)卡的內(nèi)容简珠。選項(xiàng)卡標(biāo)題可以用無序列表標(biāo)簽 ul 實(shí)現(xiàn)，選項(xiàng)卡內(nèi)容則可以放在一個 div 標(biāo)簽里。嗯聋庵，布局決定好了膘融，現(xiàn)在就可以往 html 文件里寫內(nèi)容啦~
現(xiàn)在的效果圖是這樣的，很丑
所以下一步就是利用 css 美化頁面啦~
先將 css 文件鏈接到 html 文件中〖烙瘢現(xiàn)在開始真正地編輯 css 代碼了氧映。首先，需要去掉列表前面的原點(diǎn)脱货，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 讓字體垂直居中。
選項(xiàng)卡標(biāo)題欄樣式設(shè)置就基本完成了利诺，但選項(xiàng)卡內(nèi)容部分看起來還是有點(diǎn)奇怪富蓄，所以下面開始選項(xiàng)卡內(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 來實(shí)現(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)該可以用更少的代碼來實(shí)現(xiàn)，但現(xiàn)在我還不會……）
整個選項(xiàng)卡切換效果就完成了规丽，繼續(xù)加油Ｆ涯痢！赌莺！
