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