調用jQuery特效實作(Tab控件篇)

調用jQuery特效實作(Tab控件篇)

作者：阿諾於 2009年04月08日星期三 13:46:43 | 觀看次數：9,15277 則迴響

近幾年發展的部落格元件⁽¹⁾越出越多，諾覺得各各都有其特色，沒有一個想放過都想裝上。
但礙於網頁的版面有限，常常放到最後不是版面不夠放，就是版型嚴重被破壞，最後也只好忍痛移除。ˊˋ

為了解決上述問題，使用Tab控件是個不錯的解決方案。在使用了Tab標籤後，相同的空間大小就可利用來放置更多的部落格小玩意，也能將有限的版面空間運用得更淋漓盡致喔⁽²⁾。^_^

如果您之前已經實作並成功運行「調用jQuery特效實作(隱藏迴響欄位篇)」這篇。
那麼這次介紹的「Tab控件篇」的設置，對您來說將會非常簡單，就像小菜一碟。(Easy的啦)

當然沒做過前篇也無所謂，這篇是單純以調用jQuery特效實現Tab控件的實作分享，只要照著步驟一步一步做、把語法貼一貼，自然就能成功了⁽³⁾。
下面簡單的三個步驟就能完成所有設置，我們就一步一步的來實作吧~*

步驟一：導入jQuery程式庫及調用Tab控件語法

jQuery程式庫可從官方網站自行下載最新版本(1.3.2)或直接調用Google提供的API。
Tab控件語法於此處下載(1KB)，將檔案解壓縮後放置於您主機上或方便運用的空間。
將下面語法複製貼於head開始與結束標籤之間的適當位置：

<!-- 導入jQuery程式庫 -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!-- 調用jQuery的Tabs控件 -->
<script type="text/javascript" src="http://您空間的網址/jquery.tabs.js"></script>

設置如下圖(請自行修改jquery.tabs.js檔案所放置的位置)：

步驟二：加入Tab控件所使用的CSS語法

以WordPress為例，請於style.css內新增下列語法：

/* jquery-tabs格式 */
 
.jquery-tabs{background-color:#FAFAFA;}
.jquery-tabs p span{background-color:#EFEFEF;border:1px solid
#CCCCCC;cursor:pointer;margin-right:2px;padding:2px 3px;}
.jquery-tabs p span.current{background-color:#FAFAFA; border-bottom-color:#fafafa;}
.jquery-tabs p{border-bottom:1px solid #CCCCCC;font-weight:bold;padding:0 10px 2px;}
.jquery-tabs li{border-bottom:1px dotted #CCCCCC;padding-bottom:3px;margin:5px 0;}
.jquery-tabs .mhot,.jquery-tabs.allhot{display:none;}

步驟三：加入Tab控件語法

範例為三個頁籤，請自行依使用狀況增減。^_^

<div class="jquery-tabs">
<p>
<span id="tab_1">第一個頁籤標題</span>
<span id="tab_2">第二個頁籤標題</span>
<span id="tab_3">第三個頁籤標題</span>
</p>
<ul class="tab_1">
第一個頁籤內容(圖片或文字)</ul>
<ul class="tab_2">
第二個頁籤內容(圖片或文字)</ul>
<ul class="tab_3">
第三個頁籤內容(圖片或文字)</ul>
</div>

OK，所有設置完畢，自行檢查試驗jQuery的效果吧。^_^

附註：

1、jQuery具有跨瀏覽器平台的重要特性，各大瀏覽器均可正常呈現特效。
2、諾提供的jQuery檔案，語法部分均有詳細註解，如有需要可依使用需求自行修改。^_^

部落軌道、Plurk、GFC、MyBlogLog、funP粉絲、標籤雲 [來源 ↩]
右側側邊攔有範例。 [來源 ↩]
jQuery語法部分的$代稱諾都換掉了，避免與prototype.js的代稱衝突，所以可以安心使用。 [來源 ↩]

77 則迴響 »

第1則連結通告由 Pages tagged "ajax" 發表：

[...] bookmarks tagged ajax 調用jQuery特效實作(Tab控件篇) saved by 5 others xbrendaxsongxoxo bookmarked on 04/08/09 | [...]

- 於 2009 年 04 月 08 日 14:15:20

第2則迴響由 百里幻雲 發表：

感謝哦!!
會來試試看.
有時裝太多元件在部落格上，會有延遲情況.
不知這個會不會哩!

- 於 2009 年 04 月 08 日 16:08:21

第3則迴響由 Nova 發表：

google的這麼強啊～只有1k喔～

- 於 2009 年 04 月 08 日 16:51:43

第4則迴響由情情發表：

請問一下，天空部落可以使用jQuery嗎??

謝謝

- 於 2009 年 04 月 08 日 16:54:22

第5則迴響由阿諾發表：

To 百里幻雲

如果jQuery程式庫是調用Google的，那這個Tab控件只有1KB，載入時幾乎感覺不到它的存在，是否會延遲就要看部落格元件的載入速度嚕。^_^

To Nova

jQuery程式庫1.3.2版的約50幾KB，是Google主機超穩，而且有運用高級技術讓世界各地任何地方連Google網站都一樣快。Tab控件的語法部分其實連1KB都不到喔。^_^

To 情情

我沒用過天空的空間，你試試看能否做到下面兩點，如果可以就能用。
1、能否自己在head標籤中宣告JavaScript？
2、能否自定義CSS？

- 於 2009 年 04 月 08 日 17:14:36

第6則迴響由情情發表：

天空可以直接編輯 CSS 檔變更面版，所以是不是只要套用進去就可以了??

- 於 2009 年 04 月 08 日 18:03:35

第7則迴響由阿諾發表：

To 情情

在head開始與結束標籤之間需要宣告JavaScript，光宣告還不夠，重點是得要支援JS語法才行，如果能支援JS語法的話，直接把jquery.tabs.js裡面的原始碼貼出來用也行。

這些問題都是BSP太多限制+不自由的關係...

- 於 2009 年 04 月 08 日 18:38:37

第8則迴響由佑發表：

這個好用
雖然自己已經有用過
不過完全不懂原理

- 於 2009 年 04 月 08 日 19:08:37

第9則迴響由小笠發表：

這個很實用呢
我也來改看看

- 於 2009 年 04 月 08 日 19:09:38

第10則迴響由 Xavier 發表：

馬上來研究研究
可以請問一下要如何在上面加上框框?
我套用教學裡的CSS只有顯示文字

- 於 2009 年 04 月 08 日 20:14:05

第11則迴響由哇哇發表：

這個還真是不錯！
我也要來去試試看！

- 於 2009 年 04 月 09 日 01:05:17

第12則迴響由阿諾發表：

To 佑

其實原理好單純，說穿了一點都不值錢。
呼叫了jQuery函數實現隱藏，並套用了CSS而已。

To 小笠

嗯，有問題再跟我說，成功了要回報喔。XD

To Xavier

剛看了一下，CSS中的「.jquery-tabs p」就是框框的部份。
很明顯的第三步驟的語法中，諾漏掉了「p」的標籤。(驚)
第三步驟的第一至第六行諾已經修改好了，你再試試看，這樣就會出現框框了。^_^
感恩哪！

To 哇哇

呵呵，夜深了，試完早點休息囉。

- 於 2009 年 04 月 09 日 01:27:10

第13則迴響由小笠發表：

我今天終於有空搞了一下
現在大致ok了
想問一下阿諾不知道他的字顏色可以換嗎
謝謝囉

- 於 2009 年 04 月 17 日 14:25:44

第14則迴響由阿諾發表：

To 小笠

可以變唷，格式是透過CSS控制的！
目前的顏色(#CCCCCC)、字體粗體(bold)，這可以變更為你喜歡的喔。^_^

- 於 2009 年 04 月 17 日 15:11:45

第15則迴響由阿福發表：

感覺很好玩!!
但好想得修改CSS有點麻煩
一換 THEME 又得重新修改
這有套件 PLUGIN ??
直接裝上去就可以用??
這樣比較方便的說 XD

- 於 2009 年 04 月 19 日 23:12:38

第16則迴響由 看樹狗-小白 發表：

小白也用了~ 謝謝!阿諾~

- 於 2009 年 04 月 20 日 23:32:52

第17則迴響由阿諾發表：

To 阿福

是增加CSS唷...如果有跟原本的標籤重複才需要修改。^_^
做成套件應該不難，不過這方面沒去研究...諾找機會來研究研究WP的外掛製作好了。XD

To 看樹狗-小白

喔喔，看來這幾篇教學有功效耶。
目前兩個網站實作成功了，讚耶！

- 於 2009 年 04 月 21 日 10:00:07

第18則迴響由 wtssoccer 發表：

好有趣耶
但我看不太懂
痞客邦能用嗎?
我來試試看好了
-------------------------------
於 2009 年 04 月 29 日 14:59:10
結果還是搞不定
不知道步驟二的內容到底要放在那??

- 於 2009 年 04 月 29 日 14:27:30

第19則迴響由阿諾發表：

To wtssoccer

步驟二就是新增Tab所要使用的CSS語法唷。
將語法複製，新增於您網站所使用的CSS檔即可。

- 於 2009 年 04 月 29 日 16:47:56

第20則迴響由小笠發表：

諾我想問你喔
這個有沒有什麼方法可以改良
在讀取的時候不要先把所有的widget都顯示出來
感覺有點突兀想問你看看有沒有什麼想法

- 於 2009 年 05 月 09 日 14:54:10

第21則迴響由阿諾發表：

To 小笠

目前是先讀取後隱藏，其實我也想改成動態讀取說。
我再研究看看是否能實現。^_^

- 於 2009 年 05 月 11 日 00:19:35

第22則迴響由 kueili 發表：

我想...我會很好奇的想要來研究這一下
對於這部落格架構，有太多的好奇心..

- 於 2009 年 05 月 22 日 15:33:56

第23則迴響由 Marty 發表：

想請教,為什麼我的TAB會偏右呢?
找不到可以改的地方耶!

- 於 2009 年 06 月 04 日 15:22:01

第24則連結通告由 [Google]神奇的JQuery!! | 馬丁の映像攝區 發表：

[...] JQuery Tab控件篇 [...]

- 於 2009 年 06 月 04 日 16:50:55

第25則迴響由阿諾發表：

To Marty

看了一下你的style.css檔，檢查了一下幾個包住Tab的標籤。
發現「div id="sidebar"」有定義「靠右邊」。
把float:right;拿掉或是改成float:none;就會靠左邊了。^_^

style.css (第952行)
#sidebar {
display:inline;
float:right;
margin:0;
padding:0;
width:325px;
}

- 於 2009 年 06 月 04 日 17:16:53

第26則迴響由 Marty 發表：

問個和本文不相關的問題....就是那個文字底部可以像畫線一樣的外掛是什麼呢?謝謝!

- 於 2009 年 06 月 04 日 23:48:41

第27則迴響由阿諾發表：

To Marty

那個不是外掛唷，是文字飾圖(花姊命名的)，可參考這篇；
或是花姊發表在WordPress歡樂正體中文交流所的這篇。

可以自己換喜歡的底線圖片，蠻方便的。^_^
第一條~~~~~~~~~~~~~ 第六條~~~~~~~~~~~~~

第二條~~~~~~~~~~~~~ 第七條~~~~~~~~~~~~~

第三條~~~~~~~~~~~~~ 第八條~~~~~~~~~~~~~

第四條~~~~~~~~~~~~~ 第九條~~~~~~~~~~~~~

第五條~~~~~~~~~~~~~ 第十條~~~~~~~~~~~~~

- 於 2009 年 06 月 05 日 00:46:03

第28則連結通告由 [Wordpress]讓文章更生動的文字圖飾 | 馬丁の映像攝區 發表：

[...] 先是在敗家誌中看到這個文字圖飾, 經詢問後才知道原著是花水木SOHO到澳洲, 照著原文中的說明, 再加上自己的摸索後終於設定完成, 從今天起, 文章中除了圖片外, 重要的地方也可以加上標記符號囉! [...]

- 於 2009 年 06 月 05 日 15:28:16

第29則迴響由阿肥發表：

以滑鼠快速的在span 1-4上移動...停下來時，span 1-4都會同時顯現。
不會沒人發現吧？

- 於 2009 年 06 月 09 日 00:46:29

第30則迴響由 Marty 發表：

阿諾,想請教的是你升級2.8了沒?因為我在升級後原先用adquicktag設定的TAG都無法使用,變成要手動KEY,不知你有沒有遇到呢?如果沒升級的話當然沒問題...

- 於 2009 年 06 月 12 日 13:50:13

第31則迴響由 Jie 發表：

阿諾,我也是升級了2.8之後，原本用WP-Quicktag設定好的那些TAG都變成無法使用了說，我看你也升級了2.8，你有沒有遇到一樣的問題呢 ?????

- 於 2009 年 06 月 12 日 22:04:42

第32則迴響由阿諾發表：

To Marty & Jie

諾這邊升級至WordPress 2.8以及最新版的addquicktag 1.6後也是發生同樣問題，一度懷疑是中文化問題，到官網重新下載用FTP安裝也沒解決，看著官方網站寫著支援2.8也很納悶，在等幾天觀望一下，沒有釋出新版本諾再來檢查看看原始碼哪邊有問題好了。

附註：addquicktag 1.6.1版本已經解決此一問題。

- 於 2009 年 06 月 13 日 00:21:02

第33則迴響由野兔發表：

阿諾，想請教一下
那個近期迴響是怎麼放上去的呢？
我的野兔村也放了這TAB唷！真不錯用

- 於 2009 年 06 月 20 日 01:19:29

第34則迴響由阿諾發表：

To 野兔

那是搭配Exec-PHP 4.9外掛，可直接於文章、分頁或側邊欄執行PHP語法。
只是PHP語法輸出而已，Tab效果不錯，很省空間呢。^_^

- 於 2009 年 06 月 22 日 09:45:25

第35則迴響由阿茂發表：

受益匪淺的一篇教學，改天換佈景也來實作看看。

- 於 2009 年 07 月 16 日 02:57:26

第36則迴響由 acedia0915 發表：

淺顯易懂的教學，好不容易找到並安裝好，除感動，沒其他可以形容的詞句，請接受ACE一拜～

- 於 2009 年 07 月 22 日 17:35:55

第37則迴響由 Beer 發表：

不好意思問一個比較笨的問題
請問步驟三的語法是用模組放嗎?
還有如果裡面要顯示近期文章和近期迴響
那我應該要怎麼放??

因為自己摸索很久還是不知道怎麼放= =

謝謝你哦!!

- 於 2009 年 07 月 22 日 23:42:53

第38則迴響由鋒翼發表：

抱歉打擾本人是新手

不太了解大大說的意思:
將下面語法複製貼於head開始與結束標籤之間的適當位置

不知要把語法貼在哪個檔案裡??

- 於 2009 年 07 月 23 日 13:36:28

第39則迴響由阿諾發表：

To 阿茂

很開心你喜歡這篇jQuery文章。^_^

To acedia0915

喔~Yes!淺顯易懂，真的嗎?!
我一直怕寫這樣的教學文會讓人看不懂說。QQ

To Beer

嗯，沒錯唷。步驟三的語法是用模組來實現！
可以搭配第34則迴響提到的外掛來執行PHP語法。
近期迴響的語法在「調用jQuery特效實作(Tooltips近期迴響篇)」這篇有提供。

To 鋒翼

如果是指WordPress的話，通常是位於theme資料夾中的header.php內。

- 於 2009 年 07 月 23 日 14:20:59

第40則連結通告由 啟用新佈景主題：Bluelines｜[ 想像的國度 ] 發表：

[...] 其實這個也是看敗家誌的「調用jQuery特效實作(Tab控件篇)」這篇教學才完成的，我說教學文還真是個好東西啊！ [...]

- 於 2009 年 07 月 24 日 00:26:37

第41則連結通告由 更換新佈景摟！wordpress theme : pyrmont-v2 | Dogen's Photo Snap 發表：

[...] 增加我蠻感喜歡的jQuery應用-調用jQuery特效實作(Tab控件篇)，在導覽列加讓 inove 作者分享的 lavalamp [...]

- 於 2009 年 07 月 24 日 12:45:51

第42則迴響由 Beer 發表：

哈囉阿諾！
我想問你一下，就是我的tab控件啊…
不知道為什麼在切換的時候它很「彈跳」
所以想問看看你知不知道原因？
（還是說只有我的電腦看才會這樣…）

還有就是…如果我想要點下tab之後再切換的話應該要怎麼改呢？
因為覺得可能這樣會比較好用（不會彈來彈去…）

- 於 2009 年 07 月 29 日 00:44:43

第43則迴響由阿諾發表：

To Beer

這兩天我都去妳站上測試過了，不會很彈跳啊。(環境：FireFox 3.5.2)

Tab點擊切換的語法，諾跟第36則迴響的acedia0915要來給你了。XD
已經寄至妳的信箱了，去收信吧。^_^

- 於 2009 年 07 月 30 日 13:55:46

第44則迴響由 Beer 發表：

謝謝阿諾，信我已經收到了！
但後來acedia0915有去我那留言
說其實應該要改你的CSS才能用
我之後去google查了一下
才發現應該是要改js那個檔
現在已經成功了！
方法是把下面那行的mouseover改成mousedown
jQuery(".jquery-tabs span").mouseover(function(){
不過真的還是很感謝你的幫忙哦！你真熱心^^

- 於 2009 年 07 月 30 日 20:33:55

第45則迴響由阿諾發表：

To Beer

嗯，有成功就OK。部落客就是要互相幫忙的啦，acedia0915也很熱心。^_^

- 於 2009 年 07 月 31 日 10:07:50

第46則連結通告由 Azul 新佈景上線 :p｜[ 想像的國度 ] 發表：

[...] 1. banner圖和footer圖換掉了 2. 文章迴響的部份，利用諾的tab控件教學和這篇來把迴響和引用列表分開 3. 拿掉了原本放在header上的search bar 4. [...]

- 於 2009 年 08 月 02 日 04:17:31

第47則迴響由殺氣發表：

殺氣又來問白癡問題了
我剛剛試著改css
想請問一下css控制的區域

.jquery-tabs p span
.jquery-tabs p span.current
.jquery-tabs p
.jquery-tabs li
.jquery-tabs .mhot,.jquery-tabs.allhot

希望阿諾能幫我解答

- 於 2009 年 08 月 11 日 05:06:52

第48則迴響由阿諾發表：

To 殺氣

諾推薦使用FireFox的Firebug外掛來配合修改會快很多喔。
CSS相關的一些技巧就要參考咕狗大神了，諾CSS很弱。QQ

- 於 2009 年 08 月 11 日 09:54:37

第49則迴響由夏德發表：

太強了!!(就是這個~)
感謝阿諾提供教學!!!

解決了我不少問題!!

- 於 2009 年 08 月 26 日 23:37:18

第50則迴響由阿諾發表：

To 夏德

客氣了！能幫到你是諾的榮幸啊。^_^

- 於 2009 年 08 月 27 日 21:43:43

第51則迴響由原木發表：

大大好
請教一個問題
我是用 F2blog
也爬文將 sidebar 的 float 改成 none
但是放在側邊欄位還是會有一點偏右
您提供的 css 範例是給 WP 用的
我是直接套用
不知道是不是這個原因
請教大大是否需要加(或改)別的參數
因為非常喜歡 Jquery-tab
所以請大大指教囉
謝謝~~
部落格網址 http://beau.tw

- 於 2009 年 08 月 28 日 13:51:20

第52則迴響由阿諾發表：

To 原木

諾剛剛測試了一下，應該是這個原因導致的。
錄了段影片給你，試試看吧。如果有問題側邊欄的Windows Live可以馬上聯絡到我喔。^_^

- 於 2009 年 08 月 28 日 15:11:09

第53則迴響由 blueghost 發表：

請問一下要如何做出標籤頁內中有標籤頁的形式呢
我試著將您的範例複製一組出來
貼在之間
並且修改了id和class的屬性對應
雖然有出現標籤,但是一移動過去時,整個div就縮起來了呢

想請問一下有沒有解
感謝您

- 於 2009 年 09 月 02 日 00:06:16

第54則迴響由阿諾發表：

To blueghost

巢狀是可行的。
如果同頁面要顯示兩個以上的Tab控件(巢狀或分散)，除了修改了id和class的屬性對應之外，CSS部分也要額外新增一組喔！

- 於 2009 年 09 月 02 日 10:07:11

第55則迴響由 blueghost 發表：

謝謝您的回覆
除了css新增一組之外
我注意到jquery.tabs.js這個檔案裡面也使用了jquery-tabs這個class
我也依樣化葫蘆地在ready裡面另增一組jquery的動作,class名為jquery-tabs2

不過還是出現了"移動到內層標籤,div就縮起來"的狀況
想要厚臉皮地再請教您一下,還有什麼地方需注意的呢?

感謝您

- 於 2009 年 09 月 02 日 11:55:10

第56則迴響由阿諾發表：

To blueghost

最保險的方式是把jquery.tabs.js另存一個新的jquery.tabs2.js！
然後把檔案內的jquery-tabs都改成jquery-tabs2，這樣就不會衝突到了。

PS：能留個網址嗎?比較方便幫你檢查。^_^

- 於 2009 年 09 月 02 日 12:24:46

第57則迴響由 blueghost 發表：

(給阿諾的悄悄話...)

- 於 2009 年 09 月 02 日 13:25:43

第58則迴響由朵發表：

阿諾哈嚕！

耶～ＯＫ用了！開心～
但我是把css部分放在user.css檔，才能正常顯示框框０ˇ０
不然只有字！

可是依然不能顯示中文：（

- 於 2009 年 09 月 20 日 18:21:24

第59則迴響由朵發表：

解決了＝ˇ＝
把php檔轉換成UTF-8，再上傳一次就ＯＫ了！

- 於 2009 年 09 月 20 日 19:31:15

第60則迴響由阿諾發表：

To 朵

原來是格式問題，諾的PHP統一都是UTF-8格式所以沒發生這問題。XD

- 於 2009 年 09 月 21 日 10:14:30

第61則迴響由拉拜發表：

阿諾你好
我想知道我設定tab時...放在我的側邊欄
它顯示的內容是完全整頁顯示耶~並不會有分段式的
可以到我的blog看看
是哪裡設定錯了嗎?
謝謝你

我看的是你的這篇『調用jQuery特效實作(tab控件篇)』
但不知道為什麼在這篇文章發表留言一直無法成功~會變成空白頁
所以在這裡留了

- 於 2009 年 10 月 15 日 17:55:45

第62則迴響由阿諾發表：

To 拉拜

JS檔幫你檢查了有宣告，感覺上是CSS沒被執行到。
.jquery-tabs p span.current這段檢查一下，看看是否漏掉了。
初步檢查感覺是這段沒成功執行導致的。

- 於 2009 年 10 月 16 日 09:59:17

第63則迴響由小闇發表：

阿諾好~
想問問: 我把step1的code放在header.php(head和/head之間)應該是沒錯的吧
再在style.css插入css code，用FF 3.5.4一看

整個都沒了css的設定....(可以到我家看看)
「說明」一欄原本是有兩行字的，不知道為什麼會與另一行疊在一起(囧

(之後也有用IE8,chrome,safari看，都有同樣問題)
我覺得應該是step1放語法的地方錯了才會導致這問題....
麻煩諾幫我看一下毛病究竟在哪裡了....

- 於 2009 年 11 月 01 日 13:52:05

第64則迴響由阿諾發表：

To 小闇

我去你部落格看過了，顯示很正常耶。不知是否已經被修正了。XD

- 於 2009 年 11 月 02 日 09:43:32

第65則迴響由小闇發表：

#64樓

>>因為我換了佈景嘛XDD
我想應該是step1的語法弄錯了放置地方orz
使用新佈景之後問題得以解決了~
這是有問題的header.php+style.css(monochrome佈景)
可以的話請替我檢查一下問題所在吧
http://sites.google.com/site/1231er1wrerqwt/header%2Bstyle.zip?attredirects=0&d=1

- 於 2009 年 11 月 02 日 16:53:32

第66則迴響由阿諾發表：

To 小闇

header.php的部份是正確的，如果有問題就是跟其他.js衝突到了，不過我有改過JS檔的部份，代稱都換掉了理應是不會跟其它檔案衝突的。
style.css部分試試看把jquery-tabs格式的部份移到最下面看看，初步看來都是正確的說。

- 於 2009 年 11 月 02 日 18:05:17

第67則迴響由奇諾發表：

為甚麼我的jquery-tabs無法顯示框框呢?朵大說放在user.css我不太懂這個意思呢....

- 於 2009 年 11 月 15 日 23:39:44

第68則迴響由阿諾發表：

To 奇諾

如果功能正常但是外框沒顯示的話，八成是CSS設置上有問題，檢查一下自己CSS的部份吧，看是否有衝突到或是沒完整貼上。另外如果有留網址的話我會比較方便幫你檢查。^_^

- 於 2009 年 11 月 16 日 10:19:12

第69則迴響由奇諾發表：

謝謝你的解說，我發現是我自己的錯誤....我清除Cookie後重新整理網頁
就出現框框了- -*

- 於 2009 年 11 月 16 日 12:50:08

第70則迴響由 muki 發表：

阿諾我有問題(舉手
我用了之後，只要移到第二行「非連結的數字」，框框就會消失耶QQ
你在我blog看熱門文章那邊，滑鼠移到瀏覽數就知道了~~
SOS=口=

- 於 2010 年 01 月 12 日 13:59:32

第71則迴響由阿諾發表：

To muki

大概是span標籤的關係，拿掉span試試看會不會這樣...
jquery.tabs.js裡面我有註解，jQuery會動態將span加入 .current 的樣式的關係。

親手打造部落格的家 WordPress架站管理經營
我也要這本書。QQ

- 於 2010 年 01 月 12 日 15:06:00

第72則迴響由 muki 發表：

不太懂耶
要拿掉哪裡的span阿?
是jquery裡頭的嗎???

- 於 2010 年 01 月 12 日 15:13:54

第73則迴響由阿諾發表：

To muki

妳用FireBug編輯Html動態測試看看：
[li][a href="http://blog.mukispace.com/2008/04/09/count-flash-dofu/"]正數倒數計日器(豆腐人系)[/a] [span style="color: rgb(107, 122, 123); font-family: tahoma; font-size: 10px;" class=""](7,425)[/span][/li]
改成
[li][a href="http://blog.mukispace.com/2008/04/09/count-flash-dofu/"]正數倒數計日器(豆腐人系)[/a] (7,425)[/li]
剛測試這樣就不會消失了，[div class="jquery-tabs"]內的span會觸發jquery.tabs.js的關係。

- 於 2010 年 01 月 12 日 15:23:52

第74則迴響由 muki 發表：

原來如此
謝謝阿諾唷!!!!!!
書真的沒多的coda送，所以只好送你一個飛吻(KISS)

- 於 2010 年 01 月 12 日 15:30:08

第75則迴響由阿諾發表：

To muki

Span拿掉就正常了。
齁，最後只換到小氣+痘痘+肥木的飛吻一枚。

- 於 2010 年 01 月 12 日 15:43:58

第76則迴響由 Channy 發表：

阿諾早安~
我照著上面的三個步驟做,但是最後將tab語法放到模組時
它的呈現是全部顯示出來,無法切換頁籤..感覺像是沒有抓到jquery的特效
諾可以幫我看看嗎QQ 謝謝嚕!!

貼上語法給你參考

- 於 2010 年 01 月 19 日 11:18:28

第77則迴響由阿諾發表：

To Channy

語法沒看見啊。
我到妳站上去看過了，顯示111、222、333功能蠻正常的啊?!

- 於 2010 年 01 月 19 日 13:15:20

第78則迴響由 Channy 發表：

貼上來的語法好像被吃掉了

我看的是
111
222
333
全部都顯示出來

不能用上面的頁籤控制
應該是要點1頁籤時出現111，點2頁籤時出現222

- 於 2010 年 01 月 19 日 13:27:14

第79則迴響由 Nami 發表：

請教大師, 這有辦法做輪播(rotate)嗎?
例如設定1000ms就自動轉到下個tab

- 於 2010 年 01 月 21 日 17:23:48

第80則迴響由阿諾發表：

To Nami

太過獎了，諾不是大師啦。
這款是沒有，輪播的話印象中應用在廣告看板居多，可能要找類似的Code移植看看囉。

- 於 2010 年 01 月 22 日 11:33:32

第81則迴響由 Beer 發表：

阿諾:)
我用你的tab控件一直以來都用得很順利很開心
但是昨天我把佈景檔案改了一些東西之後
tab控件就出問題了...
不知道為什麼，載入頁面之後它不會顯示第一個tab內容
但是如果自己去點標籤的話又可以用
我有檢查過tab的id名稱，確定都有正確對應到
也檢查過是否有衝突...但我目前是沒發現
不知道諾可不可以幫我看一下到底是哪邊出問題了= =?
(我弄了一整晚還是無解啊啊啊...)

- 於 2010 年 02 月 03 日 07:17:29

第82則迴響由 Beer 發表：

啊...不好意思阿諾...我的問題解決了= =
我後來發現我的這一行
是寫
把它改回jquery-tabs之後就可以了。

但是我有個疑問
因為我原先是自己手動在佈景的sidebar檔裡加tab控件
然後用的是jquery-sidebar-tabs，是可以正常運作的
為什麼我放回後台模組，就必須要換回jquery-tabs呢？
這兩者之間的差別是什麼？
我有去開過這兩個檔來看，內容幾乎是一樣的
還是我有地方沒注意到？

抱歉我問題有點多:p 先謝謝阿諾哦！

- 於 2010 年 02 月 03 日 07:28:20

第83則迴響由阿諾發表：

To Beer

剛出差回來，剛看到留言妳就解決了啊。
妳原本的jquery-sidebar-tabs是給id屬性用的「#」還是給class屬性用的「.」呢?!
這Tab控件一直以來都是用.jquery-tabs來樣式唷，諾沒改過唷。^_^