06_頁籤切換頁面

• 確認js可以運行
• document新增類別js，來區分不同功能的css
• 新增js變數-ul、tabHeading，用js來代表html物件
• 不顯示tabs之內的<h4>
• 只顯示第一個<ul>，其餘不顯示
• 完成點選頁籤標題，來切換頁面的功能

---

確認js可以運行

目前頁籤標題的部份，還需要運用javascript，才能達成點按頁籤標題切換頁籤頁面的效果

為了完成頁籤點按的功能，需運用jquery，因此在置入jquery.min.js後，在置入自訂的script.js

為了確認scripts.js可運作，先寫alert('hi')來確保js可正確運行

document新增類別js，來區分不同功能的css

為了確保沒有開啟js的瀏灠器也可正常顯示頁籤功能(tab)，需設置有開啟js的和沒開啟js的二種tab顯示方式。因此能運行js的瀏灠器會套用類別名稱className = '.js'，用來區分二種樣式的不同。

新增js變數-ul、tabHeading，用js來代表html物件

開始寫js的部份，程式初始化時(Site.init())，先取得代表頁籤頁面(tabs)的變數

先返回html的部份，觀察頁籤頁面(tabs)，所包含的物件有哪些，你會看到它是由3個<ul>所組成(comments、categories、archieves)。程式碼太多的話，可點選最左側的欄位，將程式碼暫時收合，方便觀察

可看到程式碼收合後，更能看清楚其架構

返回js的編輯畫面， 新增變數ul來代表所有tabs之內的<ul>

新增變數tabHeadings，代表頁籤標題

不顯示tabs之內的<h4>

js可以運作的版本，必需把頁籤頁面中不需要的標題<h4>給隱藏住，我們不需要讓使用者看到多餘的標題。

運行結果， 可看到目前的頁籤頁面中，有多餘的標題，那要如何把它們隱藏呢?

返回js的編輯畫面， 可以考慮用jquery的remove()的方法，先找到tabs內所有的<h4>再將其移除

但直接修改css會更簡單，將.tabs內的<h4>設定為不要顯示。
完成了移除不必要標題的功能

只顯示第一個<ul>，其餘不顯示

接下來，要製做的功能為:隱藏所有的頁籤頁面(除了第一個以外)

uls.not(':first').hide();//除了第一個<ul>之外，其餘都隱藏。
此外，故意寫錯，把ul寫成uls，觀察firebug如何顯示錯誤。

運行結果， 可看到console的除錯資訊，讓你知道變數寫錯了。

將變數全部修正為uls

運行結果， 完成了只顯示第一個頁籤頁面，而其餘都隱藏的功能。不過，這是jquery的寫法，我們可以單單用css就可完成此功能了，接下來， 來用css的寫法來完成此功能。

先將所有.tab內的<ul>都設為不要顯示，在加入只有第一個<ul>需顯示的功能

但是這樣要寫二行，太麻煩了。可將此二行的功能整理為一行就好。

完成後，替此段css留段註解。
完成了只顯示第一個頁籤頁面的功能。

完成點選頁籤標題，來切換頁面的功能

接下來， 要完成點選頁籤標題，來切換頁面的功能

委派<li>來監聽click事件，新增變數li來代表目前被點選的<li>

新增變數hash，用來代表所點選的超連結的路徑

變數設完後，下一步為:改變目前所點選的<li>的樣式，讓使用者知道目前所點選的是哪一個<li>

利用siblings()來取得同一層的所有<li>，用removeClass()先把目前的樣式給移除掉

使用end()來跳回目前點選的<li>，並用addClass()來加入樣式。完成了設定點選標題，設定標題樣式的功能。

接下來， 要取得目前所點選的超連結，以便切換到所對應的頁籤頁面

hash變數代表目前所點選的超連結路徑

接下來， 要顯示所對應的頁籤頁面

先隱藏所有的uls，用filter()來過濾出目前所點選的頁面，並只顯示目前所點選的頁面。

如果只用show()的話，就只會單純的顯示頁面。
因此，可以運用特效函數，如:fadeIn()造成淡入的效果，來使頁面更加活潑

由於點選超連結時，系統會有預設的動作。這些預設的動作會影響到我們自製的點選動作，所以使用e.preventDefault();來將預設的動作關閉。