敗家。紀錄

敗家紀錄、開箱評測、好物推薦、時尚精品、生小惡魔

樂趣。玩具

有趣玩具、酷搜搞笑、幽默小品、樂活人生、搞笑影片

生活。心情

生活心情、饕客美食、遊山玩水、動漫音樂、電影欣賞

知識。常識

實用知識、遺忘常識、職場技巧、投資方式、理財規劃

軟硬。兼施

程式設計、軟體教學、硬體效能、部落優化、網站資源

Twitter It! Plurk this! Share to Facebook!
首頁 » 軟硬。兼施

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

作者:20090408日 星期三 13:46:43 | 觀看次數:106 則迴響

jQuery特效實作(Tab控件篇)

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

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

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

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

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

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

1
2
3
4
<!-- 導入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檔案所放置的位置):

導入jQuery程式庫及調用Tab控件語法

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

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

1
2
3
4
5
6
7
8
9
/* 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控件語法

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<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檔案,語法部分均有詳細註解,如有需要可依使用需求自行修改。^_^

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

106 則迴響 »

  • 第1則 迴響由 百里幻雲 Windows 2000 Internet Explorer 6.0 發表:

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

  • 第2則 迴響由 Nova Windows XP Firefox 3.0.8 發表:

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

  • 第3則 迴響由 情情 Windows XP Internet Explorer 7.0 發表:

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

    謝謝 🙂

  • 第4則 迴響由 阿諾 Windows XP Firefox 3.0.8 發表:

    To 百里幻雲

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

    To Nova

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

    To 情情

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

  • 第5則 迴響由 情情 Windows XP Internet Explorer 7.0 發表:

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

  • 第6則 迴響由 阿諾 Windows XP Firefox 3.0.8 發表:

    To 情情

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

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

  • 第7則 迴響由 Windows Vista Firefox 3.0.7 發表:

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

  • 第8則 迴響由 小笠 Windows Vista Firefox 3.0.8 發表:

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

  • 第9則 迴響由 Xavier Windows XP Firefox 3.0.8 發表:

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

  • 第10則 迴響由 哇哇 Windows XP Firefox 3.0.8 發表:

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

  • 第11則 迴響由 阿諾 Windows XP Internet Explorer 6.0 發表:

    To 佑

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

    To 小笠

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

    To Xavier

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

    To 哇哇

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

  • 第12則 迴響由 小笠 Windows Vista Firefox 3.0.8 發表:

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

  • 第13則 迴響由 阿諾 Windows XP Firefox 3.0.8 發表:

    To 小笠

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

  • 第14則 迴響由 阿福 Windows XP Opera 9.62 發表:

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

  • 第15則 迴響由 看樹狗-小白 Windows XP Firefox 3.0.8 發表:

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

  • 第16則 迴響由 阿諾 Windows XP Firefox 3.0.8 發表:

    To 阿福

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

    To 看樹狗-小白

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

  • 第17則 迴響由 wtssoccer Windows XP Firefox 3.0.10 發表:

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

  • 第18則 迴響由 阿諾 Windows XP Firefox 3.0.10 發表:

    To wtssoccer

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

  • 第19則 迴響由 小笠 Windows Vista Firefox 3.0.10 發表:

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

  • 第20則 迴響由 阿諾 Windows XP Firefox 3.0.10 發表:

    To 小笠

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

  • 第21則 迴響由 kueili Windows XP Firefox 3.0.10 發表:

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

  • 第22則 迴響由 Marty Windows XP Firefox 3.0.10 發表:

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

  • 第23則 迴響由 阿諾 Windows XP Firefox 3.0.10 發表:

    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;
    }

  • 第24則 迴響由 Marty Windows XP Firefox 3.0.10 發表:

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

  • 第25則 迴響由 阿諾 Windows XP Firefox 3.0.10 發表:

    To Marty

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

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

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

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

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

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

  • 第26則 迴響由 阿肥 Windows XP Google Chrome 2.0.172.30 發表:

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

  • 第27則 迴響由 Marty Windows XP Firefox 3.0.10 發表:

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

  • 第28則 迴響由 Jie Windows Vista Firefox 3.0.10 發表:

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

  • 第29則 迴響由 阿諾 Windows XP Internet Explorer 6.0 發表:

    To Marty & Jie

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

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

  • 第30則 迴響由 野兔 Windows XP Google Chrome 2.0.172.31 發表:

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

  • 第31則 迴響由 阿諾 Windows XP Firefox 3.0.11 發表:

    To 野兔

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

  • 第32則 迴響由 阿茂 Windows XP Firefox 3.5 發表:

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

  • 第33則 迴響由 acedia0915 Windows XP Firefox 3.5.1 發表:

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

  • 第34則 迴響由 Beer Windows XP Firefox 3.5.1 發表:

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

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

    謝謝你哦!!

  • 第35則 迴響由 鋒翼 Windows XP Firefox 3.5 發表:

    抱歉打擾 本人是新手

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

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

  • 第36則 迴響由 阿諾 Windows XP Firefox 3.5.1 發表:

    To 阿茂

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

    To acedia0915

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

    To Beer

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

    To 鋒翼

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

  • 第37則 迴響由 Beer Windows XP Firefox 3.5.1 發表:

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

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

  • 第38則 迴響由 阿諾 Windows XP Firefox 3.5.1 發表:

    To Beer

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

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

  • 第39則 迴響由 Beer Windows XP Firefox 3.5.1 發表:

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

  • 第40則 迴響由 阿諾 Windows XP Firefox 3.5.1 發表:

    To Beer

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

  • 第41則 迴響由 殺氣 Windows XP Firefox 3.5.2 發表:

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

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

    希望阿諾能幫我解答

  • 第42則 迴響由 阿諾 Windows XP Firefox 3.5.2 發表:

    To 殺氣

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

  • 第43則 迴響由 夏德 Windows XP Firefox 3.5.2 發表:

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

    解決了我不少問題!!

  • 第44則 迴響由 阿諾 Windows other version Firefox 3.5.2 發表:

    To 夏德

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

  • 第45則 迴響由 原木 Windows XP Internet Explorer 7.0 發表:

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

  • 第46則 迴響由 阿諾 Windows XP Firefox 3.5.2 發表:

    To 原木

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

  • 第47則 迴響由 blueghost Windows XP Firefox 3.0.13 發表:

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

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

  • 第48則 迴響由 阿諾 Windows XP Firefox 3.5.2 發表:

    To blueghost

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

  • 第49則 迴響由 blueghost Windows XP Google Chrome 1.0.154.43 發表:

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

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

    感謝您

  • 第50則 迴響由 阿諾 Windows XP Firefox 3.5.2 發表:

    To blueghost

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

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

  • 第51則 迴響由 Windows XP Firefox 3.5.3 發表:

    阿諾哈嚕!

    耶~OK用了!開心~
    但我是把css部分放在user.css檔,才能正常顯示框框0ˇ0
    不然只有字!

    可是依然不能顯示中文:(

  • 第52則 迴響由 Windows XP Firefox 3.5.3 發表:

    解決了=ˇ=
    把php檔轉換成UTF-8,再上傳一次就OK了!

  • 第53則 迴響由 阿諾 Windows XP Firefox 3.5.3 發表:

    To 朵

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

  • 第54則 迴響由 拉拜 Windows XP Firefox 3.0.1 發表:

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

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

  • 第55則 迴響由 阿諾 Windows XP Firefox 3.5.3 發表:

    To 拉拜

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

  • 第56則 迴響由 小闇 Windows Vista Firefox 3.5.4 發表:

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

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

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

  • 第57則 迴響由 阿諾 Windows XP Firefox 3.5.4 發表:

    To 小闇

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

  • 第58則 迴響由 小闇 Windows Vista Firefox 3.5.4 發表:

    #64樓

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

  • 第59則 迴響由 阿諾 Windows XP Firefox 3.5.4 發表:

    To 小闇

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

  • 第60則 迴響由 奇諾 Windows other version Firefox 3.5.5 發表:

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

  • 第61則 迴響由 阿諾 Windows XP Firefox 3.5.5 發表:

    To 奇諾

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

  • 第62則 迴響由 奇諾 Windows other version Firefox 3.5.5 發表:

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

  • 第63則 迴響由 muki Windows XP Firefox 3.5.7 發表:

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

  • 第64則 迴響由 阿諾 Windows XP Firefox 3.5.7 發表:

    To muki

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

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

  • 第65則 迴響由 muki Windows XP Firefox 3.5.7 發表:

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

  • 第66則 迴響由 阿諾 Windows XP Firefox 3.5.7 發表:

    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的關係。

  • 第67則 迴響由 muki Windows XP Firefox 3.5.7 發表:

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

  • 第68則 迴響由 阿諾 Windows XP Firefox 3.5.7 發表:

    To muki

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

  • 第69則 迴響由 Channy Windows XP Google Chrome 4.0.249.64 發表:

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

    貼上語法給你參考

  • 第70則 迴響由 阿諾 Windows XP Firefox 3.5.7 發表:

    To Channy

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

  • 第71則 迴響由 Channy Windows XP Google Chrome 4.0.249.64 發表:

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

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

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

  • 第72則 迴響由 Nami Windows XP Firefox 3.0.6 發表:

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

  • 第73則 迴響由 阿諾 Windows XP Firefox 3.5.7 發表:

    To Nami

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

  • 第74則 迴響由 Beer Windows XP Firefox 3.5.7 發表:

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

  • 第75則 迴響由 Beer Windows XP Firefox 3.5.7 發表:

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

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

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

  • 第76則 迴響由 阿諾 Windows XP Firefox 3.6 發表:

    To Beer

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

  • 第77則 迴響由 Beer Windows XP Firefox 3.5.7 發表:

    我突然想到.....
    jquery-sidebar-tabs好像是我之前想在佈景中的兩處用tab控件
    所以就自己把jquery-tabs再製了一個
    後來雖然拿掉其中一個tab控件了
    但就一直都在繼續用它,沒有刪掉
    所以可能是再製的這個哪邊失效了吧!
    但是我目前找不出來它是哪邊有問題就是了

    啊哈~ 感覺有點像烏龍事件XD 金歹勢~
    不過照理說,我再製的那個應該不會突然不能用才對
    我再檢查看看是哪裡有問題好了,還是謝謝阿諾囉:)

  • 第78則 迴響由 西岸 Windows other version Firefox 3.6 發表:

    这个介绍详细、清楚,很实用。

  • 第79則 迴響由 Tiffy Windows other version Firefox 3.6.3 發表:

    這一篇太棒了!實現了我想要的效果~
    謝謝你^^

  • 第80則 迴響由 miu Windows XP Google Chrome 5.0.375.70 發表:

    阿諾可以請問一下嗎QQ
    我照你上面的做了~目前如果沒有放東西時是能顯示TAB控件的
    但是我要是在第一項的文字部份放入噗浪的語法他便會一直顯示"儲存中"的樣子
    所以WP前台也就看也看不到了@@
    這是怎麼回事呢?麻煩你了><

  • 第81則 迴響由 阿諾 Windows other version Firefox 3.6.6 發表:

    To 西岸、Tiffy

    謝謝你們捧場支持。 🙂

    To miu

    您沒留網址,我無法幫你查看。
    你把噗浪語法用iframe方式嵌入進去試試看,應該就正常了。

  • 第82則 迴響由 sweetmiu Windows XP Google Chrome 5.0.375.70 發表:

    不好意思 網址我放上哩:)
    剛才又再試了一下
    好像是iframe的語法沒辦法放進模組裡@_@"
    他會一直顯示儲存中的樣子,就一直沒有寫進blog這樣...
    如果把iframe那段剪下,其他的就能完整儲存><
    (不知道您聽的懂不懂>_<a)

  • 第83則 迴響由 阿諾 Windows Vista Firefox 3.6.6 發表:

    To sweetmiu

    將下列語法放入看看,uid=3180949改成你自己的試試看吧。^_^

    1
    
    <iframe src="http://www.plurk.com/getWidget?uid=3180949&amp;h=300&amp;w=300&amp;u_info=2&amp;bg=303030&tl=FFFFFF" width="300" frameborder="0" height="300" scrolling="no"></iframe>
  • 第84則 迴響由 sweetmiu Windows XP Google Chrome 5.0.375.70 發表:

    阿諾~~╯╰讓你失望了...
    結果還是一樣耶...不管是貼你給我的還是我自己的都會一直顯示儲存中的樣子
    在wp前台看還是一樣難產T^T...

    (題外話,為什麼我去Gravatar申請過帳號也上傳頭像了結果留言還是沒有頭像?@@")

  • 第85則 迴響由 阿諾 Windows Vista Firefox 3.6.6 發表:

    To sweetmiu

    你開一個WordPress管理員權限的帳號給我,我連上去幫你看看。
    帳號密碼可用我網站右側「敗家誌°社群→Windows Live」傳給我。

    Gravatar是認E-mail的,用你在Gravatar註冊的E-mail就會有圖像了。

  • 第86則 迴響由 sweetmiu Windows XP Google Chrome 5.0.375.86 發表:

    阿諾我已經把管理員的帳密用私噗發給你了0.0

  • 第87則 迴響由 阿諾 Windows Vista Firefox 3.6.6 發表:

    To sweetmiu

    測試許久,發現應該是主機不允許使用iFrame標籤。
    你的是免費主機嗎?!ACsite的主機嗎?!

    目前已經處理完畢,可以顯示了。大小需要你自己在噗浪後台設定,寬度改為250至280左右即可。另外我有開WordPress的課程,如想學技術可以報名參加喔。^_^

  • 第88則 迴響由 liveunbuttoned Windows XP Internet Explorer 7.0 發表:

    您好,想請教您這個jquery tab是不是有bug,滑鼠在兩個標題快速左右移動之後在停住在其中一個標題,這樣會一次顯示這兩個標題的內容,不知道阿諾大如何解決這個bug呢? 感謝^^

  • 第89則 迴響由 尼克 Windows Vista Firefox 3.6.6 發表:

    dear 阿諾
    太感謝你這篇教學了,寫得簡單明瞭,
    順著步驟尼克順利完成囉!!!!
    總算是可以擺脫落落長的側欄。

    ps.WordPress的課程還會繼續開課嗎????

  • 第90則 迴響由 阿諾 Windows Vista Firefox 3.6.6 發表:

    To liveunbuttoned

    那種問題應該是瀏覽器的關係,鼠標再移至任何Tab上就會復原了。

    To 尼克

    客氣了,很開心這篇教學文章能幫助到你。 🙂
    如果招生順利,WordPress的課程還是會繼續開課的。^_^

  • 第91則 迴響由 新手 Windows other version Internet Explorer 8.0 發表:

    剛接觸jQuery就找到著篇好教學
    真是謝謝您

    有個問題想請教

    如果我們把這個TAB放到畫面較下方(就等於需要移動卷軸才可閱讀完)
    當我們至另一TAB標籤後
    整個畫面又跳回最上方
    這樣閱讀起來有些不便

    請問有修正方法?

  • 第92則 迴響由 阿諾 Windows Vista Firefox 3.6.8 發表:

    To 新手

    每個TAB都是獨立且會保持在最後離開時的狀態,即使把TAB放到畫面較下方,需要移動卷軸才可閱讀完,也不會影響到其它TAB的內容喔。
    你可以把TAB中內容較長的部分用iFrame包起來,過長的內容就能透過iFrame的ScrollBar來拖動,效果會更好喔。

    PS:有留網址我才好協助處理,文字敘述有時會有理解上的誤差。

  • 第93則 迴響由 新手 Windows other version Internet Explorer 8.0 發表:

    再次感謝您這麼快就回復
    我附上測試用網址
    http://www.taconet.com.tw/eecck

    下面的1 2 3分別就是三個不同的TAB

    狀況如上述
    指向2或3時
    整個頁面又回到最上方了

    麻煩您囉

  • 第94則 迴響由 新手 Windows other version Internet Explorer 8.0 發表:

    謝謝這麼快就回我

    http://www.taconet.com.tw/eecck
    網址內的就是測試用網頁

    下方123是我的TAB
    分別出現1A 2B 3C等內容

    問題依樣是剛剛所說的
    當我頁面捲製最下方 且選至2時
    整個頁面又跳回最上方囉!

    麻煩您了

  • 第95則 迴響由 Windows XP Google Chrome 6.0.472.63 發表:

    阿諾有個笨問題想問一下,我的網誌上除了使用你的tab控件,還有另外使用Color box燈箱外掛
    但在使用tabs時,需要導入jQuery,不過Color box同時也需要調用到,請問有辦法讓jQuery只調用一次,卻又能讓兩個外掛同時運作嗎?
    我嘗試很多次,不過不太懂所以一直失敗…所以想來請益這是否有解決辦法,又或者世一定要各自調用。以下是我使用的語法:

    </script

    $(document).ready(function(){
    $("a[rel='image']").colorbox({slideshow:true});
    $(".web").colorbox({width:"80%", height:"80%", iframe:true});
    $(".video").colorbox({iframe:true, innerWidth:425, innerHeight:344});
    });

    在此也附上我的測試網誌:http://rahuashura.blogspot.com/

  • 第96則 迴響由 Windows XP Google Chrome 6.0.472.63 發表:

    忘記語法不能顯示…orz
    語法在此:http://www.google.com/notebook/public/11907279497310478100/BDR2oDAoQ0ceq-bcl?hl=zh-TW
    期待你的回應:D

  • 第97則 迴響由 阿諾 Windows other version Firefox 3.5.5 發表:

    To 憂

    將你的jQuery裡面的$全部換成jQuery試試看。
    Ex:$(document).ready(function()
    改成jQuery$(document).ready(function()
    這樣可以有效防止控件衝突。

    另外jQuery的函式庫只需要導入一次,不用重覆宣告。^_^

  • 第98則 迴響由 Windows XP Google Chrome 6.0.472.63 發表:

    抱歉可能我語意不清楚@@
    就筆記的語法,目前使用是ok的
    我的目的在於希望將jQuery修正成只宣告一次
    但怎麼試都失敗~"~
    內容可能有些偏離了~但還是希望你能幫忙!

    期待你的回應:D

  • 第99則 迴響由 阿諾 Windows XP Firefox 3.6.10 發表:

    To 憂

    1、在下的http://code.jquery.com/jquery-1.4.2.min.js不需要重複導入!
    所有jQuery的控件都是調用同一個函式庫的。
    2、下的Script標籤可以移至jquery.colorbox.js中,他只是個Function,這部份可以合併。

  • 第100則 迴響由 st Windows XP Firefox 3.6.10 發表:

    謝謝你~
    Blogger也ok
    真是受用無盡

    我曾把它放在主文區,想就如
    http://blog.mahahaha.tw此blog的menu一樣
    大致是ok的..但遇到一問題
    就是部落格的 "網誌文章" 要如何套入在
    "頁籤內容"
    也就是當我滑鼠移到頁籤標題(設定名稱網誌文章)時,
    看到的是網誌內容

    所以,很冒昧請教阿諾
    這有方法嗎?

    謝謝

  • 第101則 迴響由 果汁 Windows XP Firefox 3.6.10 發表:

    請問這個問題:
    以滑鼠快速的在span 1-4上移動...停下來時,span 1-4都會同時顯現。
    有解嗎? 囧rz....
    我拿來加到asp.net 3.5裡使用了...

  • 第102則 迴響由 isaac510348 Windows other version Internet Explorer 8.0 發表:

    你好
    請麻煩拜訪我的網站...
    目前使用IE7...
    但是TAB的隱藏沒順利顯示...
    麻煩哩..

  • 第103則 迴響由 isaac510348 Windows XP Firefox 3.6.13 發表:

    你好...關於TAB..我的不知道為什麼不能隱藏..
    麻煩你看一下...謝謝...
    http://kokoronotsuki.twbbs.org/

  • 第104則 迴響由 hung Windows other version Firefox 8.0.1 發表:

    感謝分享,使blog 簡潔不少 😛

    不過我在使用上有點問題,
    不知道為什麼首頁正常,可是在單篇文章的時候,卻無法用tab 摺疊起來了呢?

  • 第105則 迴響由 hung Windows other version Firefox 8.0.1 發表:

    已經自行解決了,原來是js 的路徑問題 😛

  • 第106則 迴響由 Stanley Windows other version Google Chrome 27.0.1453.116 發表:

    謝謝版主分享~
    但是想請問一下前輩

    一般使用tab做分頁都會發生同一組javascript無法共用
    (id、name在三個分頁都設定不同,應該不會有衝突)
    想請問大大您的js是在哪邊克服了這一點 ?

發表您的迴響(連結不含Nofollow)

如果喜歡這篇文章,您可以於下方「留下您的迴響」 或於您網站使用此文章的「TrackBack」連結。當然更歡迎您訂閱「此篇文章(RSS)」「敗家誌°(RSS)」,以便將日後新文章發佈給您的 RSS 瀏覽器。

敗家誌°支援 Gravatar 大頭貼,您可於「Gravatar官方網站」免費取得專屬大頭貼。emoticons

(完成後可按 Ctrl+Enter 發表迴響)

防機器人: 的答案是? (必填)