使用Jquery特效做出Tab頁籤切換效果

在網頁設計上時常需要放許多內容，但是如果照實排列會使得版面顯得冗長，因此為了節省空間，許多網頁會使用Tab頁籤的展示方式，使用者點擊想看的標題(頁籤)，其下的內容就會展開，反之其他內容則會隱藏起來，因此可以自由選擇想看的內容來點擊進行切換，相當方便且常見。而這功能用jQuery再加上CSS美化便可以直接實現了！

1. 首先在最外圍設個div

2. 將要做的頁籤內容(即點擊後展開之內容)設個共用的class，並以id命名，以便之後製作頁籤可以各自對應其內容。

例如：

3. 之後用ul、li 製作頁籤，設a連結至該對應內容。

例如：

整體html

jQuery設定

裡面的class名稱換上自己的命名。

之後寫一些CSS加以美化，就是最基本的Tab頁籤切換效果囉！

範例：