調用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檔案所放置的位置):
步驟二:加入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檔案,語法部分均有詳細註解,如有需要可依使用需求自行修改。^_^
- 部落軌道、Plurk、GFC、MyBlogLog、funP粉絲、標籤雲 [↩]
- 右側側邊攔有範例。 [↩]
- jQuery語法部分的$代稱諾都換掉了,避免與prototype.js的代稱衝突,所以可以安心使用。 [↩]
感謝哦!!
會來試試看.
有時裝太多元件在部落格上,會有延遲情況.
不知這個會不會哩!
google的這麼強啊~只有1k喔~
請問一下,天空部落可以使用jQuery嗎??
謝謝 🙂
To 百里幻雲
如果jQuery程式庫是調用Google的,那這個Tab控件只有1KB,載入時幾乎感覺不到它的存在,是否會延遲就要看部落格元件的載入速度嚕。^_^
To Nova
jQuery程式庫1.3.2版的約50幾KB,是Google主機超穩,而且有運用高級技術讓世界各地任何地方連Google網站都一樣快。Tab控件的語法部分其實連1KB都不到喔。^_^
To 情情
我沒用過天空的空間,你試試看能否做到下面兩點,如果可以就能用。
1、能否自己在head標籤中宣告JavaScript?
2、能否自定義CSS?
天空可以直接編輯 CSS 檔變更面版,所以是不是只要套用進去就可以了?? 💡
To 情情
在head開始與結束標籤之間需要宣告JavaScript,光宣告還不夠,重點是得要支援JS語法才行,如果能支援JS語法的話,直接把jquery.tabs.js裡面的原始碼貼出來用也行。
這些問題都是BSP太多限制+不自由的關係...
這個好用
雖然自己已經有用過
不過完全不懂原理
這個很實用呢
我也來改看看
馬上來研究研究 😀
可以請問一下要如何在上面加上框框?
我套用教學裡的CSS只有顯示文字
這個還真是不錯!
我也要來去試試看!
To 佑
其實原理好單純,說穿了一點都不值錢。 😛
呼叫了jQuery函數實現隱藏,並套用了CSS而已。
To 小笠
嗯,有問題再跟我說,成功了要回報喔。XD
To Xavier
剛看了一下,CSS中的「.jquery-tabs p」就是框框的部份。
很明顯的第三步驟的語法中,諾漏掉了「p」的標籤。(驚)
第三步驟的第一至第六行諾已經修改好了,你再試試看,這樣就會出現框框了。^_^
感恩哪!
To 哇哇
呵呵,夜深了,試完早點休息囉。 🙂
我今天終於有空搞了一下
現在大致ok了
想問一下阿諾 不知道他的字顏色可以換嗎
謝謝囉
To 小笠
可以變唷,格式是透過CSS控制的!
目前的顏色(#CCCCCC)、字體粗體(bold),這可以變更為你喜歡的喔。^_^
感覺很好玩!!
但好想得修改CSS有點麻煩
一換 THEME 又得重新修改
這有套件 PLUGIN ??
直接裝上去就可以用??
這樣比較方便的說 XD
小白也用了~ 謝謝!阿諾~
To 阿福
是增加CSS唷...如果有跟原本的標籤重複才需要修改。^_^
做成套件應該不難,不過這方面沒去研究...諾找機會來研究研究WP的外掛製作好了。XD
To 看樹狗-小白
喔喔,看來這幾篇教學有功效耶。 😆
目前兩個網站實作成功了,讚耶!
好有趣耶
但我看不太懂
痞客邦能用嗎?
我來試試看好了
-------------------------------
於 2009 年 04 月 29 日 14:59:10
結果還是搞不定
不知道步驟二的內容到底要放在那??
To wtssoccer
步驟二就是新增Tab所要使用的CSS語法唷。 🙂
將語法複製,新增於您網站所使用的CSS檔即可。
諾 我想問你喔
這個有沒有什麼方法可以改良
在讀取的時候 不要先把所有的widget都顯示出來
感覺有點突兀 想問你看看有沒有什麼想法
To 小笠
目前是先讀取後隱藏,其實我也想改成動態讀取說。 😳
我再研究看看是否能實現。^_^
我想...我會很好奇的想要來研究這一下
對於這部落格架構,有太多的好奇心..
想請教,為什麼我的TAB會偏右呢?
找不到可以改的地方耶!
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;
}
問個和本文不相關的問題....就是那個文字底部可以像畫線一樣的外掛是什麼呢?謝謝!
To Marty
那個不是外掛唷,是文字飾圖(花姊命名的),可參考這篇;
或是花姊發表在WordPress歡樂正體中文交流所的這篇。
可以自己換喜歡的底線圖片,蠻方便的。^_^
第一條~~~~~~~~~~~~~ 第六條~~~~~~~~~~~~~
第二條~~~~~~~~~~~~~ 第七條~~~~~~~~~~~~~
第三條~~~~~~~~~~~~~ 第八條~~~~~~~~~~~~~
第四條~~~~~~~~~~~~~ 第九條~~~~~~~~~~~~~
第五條~~~~~~~~~~~~~ 第十條~~~~~~~~~~~~~
以滑鼠快速的在span 1-4上移動...停下來時,span 1-4都會同時顯現。
不會沒人發現吧?
阿諾,想請教的是你升級2.8了沒?因為我在升級後原先用adquicktag設定的TAG都無法使用,變成要手動KEY,不知你有沒有遇到呢?如果沒升級的話當然沒問題...
阿諾,我也是升級了2.8之後,原本用WP-Quicktag設定好的那些TAG都變成無法使用了說,我看你也升級了2.8,你有沒有遇到一樣的問題呢 ?????
To Marty & Jie
諾這邊升級至WordPress 2.8以及最新版的addquicktag 1.6後也是發生同樣問題,一度懷疑是中文化問題,到官網重新下載用FTP安裝也沒解決,看著官方網站寫著支援2.8也很納悶,在等幾天觀望一下,沒有釋出新版本諾再來檢查看看原始碼哪邊有問題好了。 😕
附註:addquicktag 1.6.1版本已經解決此一問題。
阿諾,想請教一下
那個近期迴響是怎麼放上去的呢?
我的野兔村也放了這TAB唷!真不錯用
To 野兔
那是搭配Exec-PHP 4.9外掛,可直接於文章、分頁或側邊欄執行PHP語法。
只是PHP語法輸出而已,Tab效果不錯,很省空間呢。^_^
受益匪淺的一篇教學,改天換佈景也來實作看看。
淺顯易懂的教學,好不容易找到並安裝好,除感動,沒其他可以形容的詞句,請接受ACE一拜~
不好意思問一個比較笨的問題
請問步驟三的語法是用模組放嗎?
還有如果裡面要顯示近期文章和近期迴響
那我應該要怎麼放??
因為自己摸索很久還是不知道怎麼放= =
謝謝你哦!!
抱歉打擾 本人是新手
不太了解大大說的意思:
將下面語法複製貼於head開始與結束標籤之間的適當位置
不知要把語法貼在哪個檔案裡??
To 阿茂
很開心你喜歡這篇jQuery文章。^_^
To acedia0915
喔~Yes!淺顯易懂,真的嗎?!
我一直怕寫這樣的教學文會讓人看不懂說。QQ
To Beer
嗯,沒錯唷。步驟三的語法是用模組來實現!
可以搭配第34則迴響提到的外掛來執行PHP語法。
近期迴響的語法在「調用jQuery特效實作(Tooltips近期迴響篇)」這篇有提供。
To 鋒翼
如果是指WordPress的話,通常是位於theme資料夾中的header.php內。
哈囉阿諾!
我想問你一下,就是我的tab控件啊…
不知道為什麼在切換的時候它很「彈跳」
所以想問看看你知不知道原因?
(還是說只有我的電腦看才會這樣…)
還有就是…如果我想要點下tab之後再切換的話應該要怎麼改呢?
因為覺得可能這樣會比較好用(不會彈來彈去…)
To Beer
這兩天我都去妳站上測試過了,不會很彈跳啊。(環境:FireFox 3.5.2)
Tab點擊切換的語法,諾跟第36則迴響的acedia0915要來給你了。XD
已經寄至妳的信箱了,去收信吧。^_^
謝謝阿諾,信我已經收到了!
但後來acedia0915有去我那留言
說其實應該要改你的CSS才能用
我之後去google查了一下
才發現應該是要改js那個檔
現在已經成功了!
方法是把下面那行的mouseover改成mousedown
jQuery(".jquery-tabs span").mouseover(function(){
不過真的還是很感謝你的幫忙哦!你真熱心^^
To Beer
嗯,有成功就OK。部落客就是要互相幫忙的啦,acedia0915也很熱心。^_^
殺氣又來問白癡問題了
我剛剛試著改css
想請問一下css控制的區域
.jquery-tabs p span
.jquery-tabs p span.current
.jquery-tabs p
.jquery-tabs li
.jquery-tabs .mhot,.jquery-tabs.allhot
希望阿諾能幫我解答
To 殺氣
諾推薦使用FireFox的Firebug外掛來配合修改會快很多喔。
CSS相關的一些技巧就要參考咕狗大神了,諾CSS很弱。QQ
太強了!!(就是這個~)
感謝阿諾提供教學!!!
解決了我不少問題!!
To 夏德
客氣了!能幫到你是諾的榮幸啊。^_^
大大好
請教一個問題
我是用 F2blog
也爬文將 sidebar 的 float 改成 none
但是放在側邊欄位還是會有一點偏右
您提供的 css 範例是給 WP 用的
我是直接套用
不知道是不是這個原因
請教大大是否需要加(或改)別的參數
因為非常喜歡 Jquery-tab
所以請大大指教囉
謝謝~~
部落格網址 http://beau.tw
To 原木
諾剛剛測試了一下,應該是這個原因導致的。
錄了段影片給你,試試看吧。如果有問題側邊欄的Windows Live可以馬上聯絡到我喔。^_^
請問一下要如何做出標籤頁內中有標籤頁的形式呢
我試著將您的範例複製一組出來
貼在之間
並且修改了id和class的屬性對應
雖然有出現標籤,但是一移動過去時,整個div就縮起來了呢
想請問一下有沒有解
感謝您
To blueghost
巢狀是可行的。 😳
如果同頁面要顯示兩個以上的Tab控件(巢狀或分散),除了修改了id和class的屬性對應之外,CSS部分也要額外新增一組喔!
謝謝您的回覆
除了css新增一組之外
我注意到jquery.tabs.js這個檔案裡面也使用了jquery-tabs這個class
我也依樣化葫蘆地在ready裡面另增一組jquery的動作,class名為jquery-tabs2
不過還是出現了"移動到內層標籤,div就縮起來"的狀況
想要厚臉皮地再請教您一下,還有什麼地方需注意的呢?
感謝您
To blueghost
最保險的方式是把jquery.tabs.js另存一個新的jquery.tabs2.js!
然後把檔案內的jquery-tabs都改成jquery-tabs2,這樣就不會衝突到了。
PS:能留個網址嗎?比較方便幫你檢查。^_^
阿諾哈嚕!
耶~OK用了!開心~
但我是把css部分放在user.css檔,才能正常顯示框框0ˇ0
不然只有字!
可是依然不能顯示中文:(
解決了=ˇ=
把php檔轉換成UTF-8,再上傳一次就OK了!
To 朵
原來是格式問題,諾的PHP統一都是UTF-8格式所以沒發生這問題。XD
阿諾你好
我想知道我設定tab時...放在我的側邊欄
它顯示的內容是完全整頁顯示耶~並不會有分段式的
可以到我的blog看看
是哪裡設定錯了嗎?
謝謝你
我看的是你的這篇『調用jQuery特效實作(tab控件篇)』
但不知道為什麼在這篇文章發表留言一直無法成功~會變成空白頁
所以在這裡留了
To 拉拜
JS檔幫你檢查了有宣告,感覺上是CSS沒被執行到。
.jquery-tabs p span.current這段檢查一下,看看是否漏掉了。
初步檢查感覺是這段沒成功執行導致的。
阿諾好~
想問問: 我把step1的code放在header.php(head和/head之間)應該是沒錯的吧
再在style.css插入css code,用FF 3.5.4一看
整個都沒了css的設定....(可以到我家看看)
「說明」一欄原本是有兩行字的,不知道為什麼會與另一行疊在一起(囧
(之後也有用IE8,chrome,safari看,都有同樣問題)
我覺得應該是step1放語法的地方錯了才會導致這問題.... 😕
麻煩諾幫我看一下毛病究竟在哪裡了....
To 小闇
我去你部落格看過了,顯示很正常耶。不知是否已經被修正了。XD
#64樓
>>因為我換了佈景嘛XDD
我想應該是step1的語法弄錯了放置地方orz
使用新佈景之後問題得以解決了~
這是有問題的header.php+style.css(monochrome佈景)
可以的話請替我檢查一下問題所在吧 😕
http://sites.google.com/site/1231er1wrerqwt/header%2Bstyle.zip?attredirects=0&d=1
To 小闇
header.php的部份是正確的,如果有問題就是跟其他.js衝突到了,不過我有改過JS檔的部份,代稱都換掉了理應是不會跟其它檔案衝突的。
style.css部分試試看把jquery-tabs格式的部份移到最下面看看,初步看來都是正確的說。
為甚麼我的jquery-tabs無法顯示框框呢?朵大說放在user.css我不太懂這個意思呢....
To 奇諾
如果功能正常但是外框沒顯示的話,八成是CSS設置上有問題,檢查一下自己CSS的部份吧,看是否有衝突到或是沒完整貼上。另外如果有留網址的話我會比較方便幫你檢查。^_^
謝謝你的解說,我發現是我自己的錯誤....我清除Cookie後重新整理網頁
就出現框框了- -*
阿諾我有問題(舉手
我用了之後,只要移到第二行「非連結的數字」,框框就會消失耶QQ
你在我blog看熱門文章那邊,滑鼠移到瀏覽數就知道了~~
SOS=口=
To muki
大概是span標籤的關係,拿掉span試試看會不會這樣...
jquery.tabs.js裡面我有註解,jQuery會動態將span加入 .current 的樣式的關係。
親手打造部落格的家 WordPress架站管理經營
我也要這本書。QQ
不太懂耶
要拿掉哪裡的span阿?
是jquery裡頭的嗎???
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的關係。
原來如此
謝謝阿諾唷!!!!!!
書真的沒多的coda送,所以只好送你一個飛吻(KISS)
To muki
Span拿掉就正常了。
齁,最後只換到小氣+痘痘+肥木的飛吻一枚。 😥
阿諾早安~
我照著上面的三個步驟做,但是最後將tab語法放到模組時
它的呈現是全部顯示出來,無法切換頁籤..感覺像是沒有抓到jquery的特效
諾可以幫我看看嗎QQ 謝謝嚕!!
貼上語法給你參考
To Channy
語法沒看見啊。 ❓
我到妳站上去看過了,顯示111、222、333功能蠻正常的啊?!
貼上來的語法好像被吃掉了
我看的是
111
222
333
全部都顯示出來
不能用上面的頁籤控制
應該是要點1頁籤時出現111,點2頁籤時出現222
請教大師, 這有辦法做輪播(rotate)嗎?
例如設定1000ms就自動轉到下個tab
To Nami
太過獎了,諾不是大師啦。 🙂
這款是沒有,輪播的話印象中應用在廣告看板居多,可能要找類似的Code移植看看囉。
阿諾:)
我用你的tab控件一直以來都用得很順利很開心
但是昨天我把佈景檔案改了一些東西之後
tab控件就出問題了...
不知道為什麼,載入頁面之後它不會顯示第一個tab內容
但是如果自己去點標籤的話又可以用
我有檢查過tab的id名稱,確定都有正確對應到
也檢查過是否有衝突...但我目前是沒發現
不知道諾可不可以幫我看一下到底是哪邊出問題了= =?
(我弄了一整晚還是無解啊啊啊...)
啊...不好意思阿諾...我的問題解決了= =
我後來發現我的這一行
是寫
把它改回jquery-tabs之後就可以了。
但是我有個疑問
因為我原先是自己手動在佈景的sidebar檔裡加tab控件
然後用的是jquery-sidebar-tabs,是可以正常運作的
為什麼我放回後台模組,就必須要換回jquery-tabs呢?
這兩者之間的差別是什麼?
我有去開過這兩個檔來看,內容幾乎是一樣的
還是我有地方沒注意到?
抱歉我問題有點多:p 先謝謝阿諾哦!
To Beer
剛出差回來,剛看到留言妳就解決了啊。 😉
妳原本的jquery-sidebar-tabs是給id屬性用的「#」還是給class屬性用的「.」呢?!
這Tab控件一直以來都是用.jquery-tabs來樣式唷,諾沒改過唷。^_^
我突然想到.....
jquery-sidebar-tabs好像是我之前想在佈景中的兩處用tab控件
所以就自己把jquery-tabs再製了一個
後來雖然拿掉其中一個tab控件了
但就一直都在繼續用它,沒有刪掉
所以可能是再製的這個哪邊失效了吧!
但是我目前找不出來它是哪邊有問題就是了
啊哈~ 感覺有點像烏龍事件XD 金歹勢~
不過照理說,我再製的那個應該不會突然不能用才對
我再檢查看看是哪裡有問題好了,還是謝謝阿諾囉:)
这个介绍详细、清楚,很实用。
這一篇太棒了!實現了我想要的效果~
謝謝你^^
阿諾可以請問一下嗎QQ
我照你上面的做了~目前如果沒有放東西時是能顯示TAB控件的
但是我要是在第一項的文字部份放入噗浪的語法他便會一直顯示"儲存中"的樣子
所以WP前台也就看也看不到了@@
這是怎麼回事呢?麻煩你了><
To 西岸、Tiffy
謝謝你們捧場支持。 🙂
To miu
您沒留網址,我無法幫你查看。
你把噗浪語法用iframe方式嵌入進去試試看,應該就正常了。
不好意思 網址我放上哩:)
剛才又再試了一下
好像是iframe的語法沒辦法放進模組裡@_@"
他會一直顯示儲存中的樣子,就一直沒有寫進blog這樣...
如果把iframe那段剪下,其他的就能完整儲存><
(不知道您聽的懂不懂>_<a)
To sweetmiu
將下列語法放入看看,uid=3180949改成你自己的試試看吧。^_^
阿諾~~╯╰讓你失望了...
結果還是一樣耶...不管是貼你給我的還是我自己的都會一直顯示儲存中的樣子
在wp前台看還是一樣難產T^T...
(題外話,為什麼我去Gravatar申請過帳號也上傳頭像了結果留言還是沒有頭像?@@")
To sweetmiu
你開一個WordPress管理員權限的帳號給我,我連上去幫你看看。
帳號密碼可用我網站右側「敗家誌°社群→Windows Live」傳給我。
Gravatar是認E-mail的,用你在Gravatar註冊的E-mail就會有圖像了。
阿諾我已經把管理員的帳密用私噗發給你了0.0
To sweetmiu
測試許久,發現應該是主機不允許使用iFrame標籤。
你的是免費主機嗎?!ACsite的主機嗎?!
目前已經處理完畢,可以顯示了。大小需要你自己在噗浪後台設定,寬度改為250至280左右即可。另外我有開WordPress的課程,如想學技術可以報名參加喔。^_^
您好,想請教您這個jquery tab是不是有bug,滑鼠在兩個標題快速左右移動之後在停住在其中一個標題,這樣會一次顯示這兩個標題的內容,不知道阿諾大如何解決這個bug呢? 感謝^^
dear 阿諾
太感謝你這篇教學了,寫得簡單明瞭,
順著步驟尼克順利完成囉!!!!
總算是可以擺脫落落長的側欄。
ps.WordPress的課程還會繼續開課嗎????
To liveunbuttoned
那種問題應該是瀏覽器的關係,鼠標再移至任何Tab上就會復原了。
To 尼克
客氣了,很開心這篇教學文章能幫助到你。 🙂
如果招生順利,WordPress的課程還是會繼續開課的。^_^
剛接觸jQuery就找到著篇好教學
真是謝謝您
有個問題想請教
如果我們把這個TAB放到畫面較下方(就等於需要移動卷軸才可閱讀完)
當我們至另一TAB標籤後
整個畫面又跳回最上方
這樣閱讀起來有些不便
請問有修正方法?
To 新手
每個TAB都是獨立且會保持在最後離開時的狀態,即使把TAB放到畫面較下方,需要移動卷軸才可閱讀完,也不會影響到其它TAB的內容喔。
你可以把TAB中內容較長的部分用iFrame包起來,過長的內容就能透過iFrame的ScrollBar來拖動,效果會更好喔。
PS:有留網址我才好協助處理,文字敘述有時會有理解上的誤差。
再次感謝您這麼快就回復
我附上測試用網址
http://www.taconet.com.tw/eecck
下面的1 2 3分別就是三個不同的TAB
狀況如上述
指向2或3時
整個頁面又回到最上方了
麻煩您囉
謝謝這麼快就回我
http://www.taconet.com.tw/eecck
網址內的就是測試用網頁
下方123是我的TAB
分別出現1A 2B 3C等內容
問題依樣是剛剛所說的
當我頁面捲製最下方 且選至2時
整個頁面又跳回最上方囉!
麻煩您了
阿諾有個笨問題想問一下,我的網誌上除了使用你的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/
忘記語法不能顯示…orz
語法在此:http://www.google.com/notebook/public/11907279497310478100/BDR2oDAoQ0ceq-bcl?hl=zh-TW
期待你的回應:D
To 憂
將你的jQuery裡面的$全部換成jQuery試試看。
Ex:$(document).ready(function()
改成jQuery$(document).ready(function()
這樣可以有效防止控件衝突。
另外jQuery的函式庫只需要導入一次,不用重覆宣告。^_^
抱歉可能我語意不清楚@@
就筆記的語法,目前使用是ok的
我的目的在於希望將jQuery修正成只宣告一次
但怎麼試都失敗~"~
內容可能有些偏離了~但還是希望你能幫忙!
期待你的回應:D
To 憂
1、在下的http://code.jquery.com/jquery-1.4.2.min.js不需要重複導入!
所有jQuery的控件都是調用同一個函式庫的。
2、下的Script標籤可以移至jquery.colorbox.js中,他只是個Function,這部份可以合併。
謝謝你~
Blogger也ok
真是受用無盡
我曾把它放在主文區,想就如
http://blog.mahahaha.tw此blog的menu一樣
大致是ok的..但遇到一問題
就是部落格的 "網誌文章" 要如何套入在
"頁籤內容"
也就是當我滑鼠移到頁籤標題(設定名稱網誌文章)時,
看到的是網誌內容
所以,很冒昧請教阿諾
這有方法嗎?
謝謝
請問這個問題:
以滑鼠快速的在span 1-4上移動...停下來時,span 1-4都會同時顯現。
有解嗎? 囧rz....
我拿來加到asp.net 3.5裡使用了...
你好
請麻煩拜訪我的網站...
目前使用IE7...
但是TAB的隱藏沒順利顯示...
麻煩哩..
你好...關於TAB..我的不知道為什麼不能隱藏..
麻煩你看一下...謝謝...
http://kokoronotsuki.twbbs.org/
感謝分享,使blog 簡潔不少 😛
不過我在使用上有點問題,
不知道為什麼首頁正常,可是在單篇文章的時候,卻無法用tab 摺疊起來了呢?
已經自行解決了,原來是js 的路徑問題 😛
謝謝版主分享~
但是想請問一下前輩
一般使用tab做分頁都會發生同一組javascript無法共用
(id、name在三個分頁都設定不同,應該不會有衝突)
想請問大大您的js是在哪邊克服了這一點 ?
發表您的迴響(連結不含Nofollow)
近期迴響 咕狗搜尋 切換語言
敗家誌°社群
友好連結(輪播)
電子郵件訂閱
Histats計數器
贊助敗家誌°
迴響排行榜
標籤雲
ADSL Blog Domain Google iPhone jQuery N82 Nokia Plugs S60 3rd SQL WordPress YouTube 串文 便宜貨 免費 公告 勸敗 地圖 工人舍 微軟 心得分享 感動 搞笑 敗家 更新 權限 正妹 正體中文 玩具 疊疊樂 知識 禮物 系統優化 純手工 網站資源 職場工作 虛擬主機 語法 資料庫 軟體分享 遊戲 金融 開箱文 電影
WP Cumulus Flash tag cloud by Roy Tanck and Luke Morton requires Flash Player 9 or better.
徽章。創用
隨機文章
視頻。精選 »
活躍文章(近期)
- 觀看次數:
- 觀看次數:
- 觀看次數:
熱門文章(全部)
- 觀看次數:
- 觀看次數:
- 觀看次數:
串聯貼紙