在網路知識爆炸的 Web 2.0 時代,一個頁面上要顯示的資訊越來越多,但總不可能把全部的內容都一次顯示出來塞滿整頁吧!所以就出現了頁籤(Tab)這樣的展示方式。
每個標籤都有相對應的內容區塊,這樣只要一個小小的位置能放置的資訊就會比原先的更多,就像是原本只是一層矮平房,現在把它蓋成 101 大樓一樣!
廢話不多說,讓我們先來看看 HTML 的部份吧:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <body> <div class="abgne_tab"> <ul class="tabs"> <li><a href="#tab1">男丁格爾</a></li> <li><a href="#tab2">jQuery</a></li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content"> <h2>關於作者</h2> <p>目前工作是網頁開發為主,因此針對了 HTML, JavaScript, CSS 等知識特別深入研究。若有任何問題,歡迎直接留言或是透過 Mail 討論。</p> </div> <div id="tab2" class="tab_content"> <h2>jQuery is a new kind of JavaScript Library.</h2> <p>jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript</p> </div> </div> </div> </body> |
.abgne_tab 區塊是用來包覆我們的頁籤區塊,而 ul 及 li 是用來當標籤,其中的超連結是利用錨點(Anchor)的方式來設定,對應到指定的 id 元素。除了可以讓 jQuery 來直接取到元素之外,當 JavaScript 被停用時,至少還能用原本錨點(Anchor)的功能。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | ul, li { margin: 0; padding: 0; list-style: none; } .abgne_tab { clear: left; width: 400px; margin: 10px 0; } ul.tabs { width: 100%; height: 32px; border-bottom: 1px solid #999; border-left: 1px solid #999; } ul.tabs li { float: left; height: 31px; line-height: 31px; overflow: hidden; position: relative; margin-bottom: -1px; /* 讓 li 往下移來遮住 ul 的部份 border-bottom */ border: 1px solid #999; border-left: none; background: #e1e1e1; } ul.tabs li a { display: block; padding: 0 20px; color: #000; border: 1px solid #fff; text-decoration: none; } ul.tabs li a:hover { background: #ccc; } ul.tabs li.active { background: #fff; border-bottom: 1px solid#fff; } ul.tabs li.active a:hover { background: #fff; } div.tab_container { clear: left; width: 100%; border: 1px solid #999; border-top: none; background: #fff; } div.tab_container .tab_content { padding: 20px; } div.tab_container .tab_content h2 { margin: 0 0 20px; } |
當設定好 CSS 排版之後,大概就能看到基本的畫面了:
筆者的想法是,在未加上程式之前把內容都先顯示出來,預設讓 JavaScript 被停用或是載入失敗時還能看到內容。接著沒問題之後,就是加上 jQuery 來實做出完整的頁籤效果囉:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | $(function(){ // 預設顯示第一個 Tab var _showTab = 0; var $defaultLi = $('ul.tabs li').eq(_showTab).addClass('active'); $($defaultLi.find('a').attr('href')).siblings().hide(); // 當 li 頁籤被點擊時... // 若要改成滑鼠移到 li 頁籤就切換時, 把 click 改成 mouseover $('ul.tabs li').click(function() { // 找出 li 中的超連結 href(#id) var $this = $(this), _clickTab = $this.find('a').attr('href'); // 把目前點擊到的 li 頁籤加上 .active // 並把兄弟元素中有 .active 的都移除 class $this.addClass('active').siblings('.active').removeClass('active'); // 淡入相對應的內容並隱藏兄弟元素 $(_clickTab).stop(false, true).fadeIn().siblings().hide(); return false; }).find('a').focus(function(){ this.blur(); }); }); |
一開始可以設定是要先顯示第幾個標籤的內容,接著就是把不顯示的部份給隱藏起來。當完成顯然及隱藏的步驟之後,就能看到完整的效果畫面了:
當點擊其它的頁籤時會立即的切換顯示相對應的內容。若想用滑鼠的滑入來觸發頁籤切換的話,只要把 click 事件改成 mouseover 事件就可以囉。
雖然完成了一個頁籤區塊,但有時可能一個頁面上就會放了2-3個頁籤區塊。若每個頁籤區塊的結構都差不多的話,我們就不用一一的為每個區塊來寫程式,只要善用 jQuery 的 each() 就能快速的完成 N 個頁籤區塊的設定:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | $(function(){ // 預設顯示第一個 Tab var _showTab = 0; $('.abgne_tab').each(function(){ // 目前的頁籤區塊 var $tab = $(this); var $defaultLi = $('ul.tabs li', $tab).eq(_showTab).addClass('active'); $($defaultLi.find('a').attr('href')).siblings().hide(); // 當 li 頁籤被點擊時... // 若要改成滑鼠移到 li 頁籤就切換時, 把 click 改成 mouseover $('ul.tabs li', $tab).click(function() { // 找出 li 中的超連結 href(#id) var $this = $(this), _clickTab = $this.find('a').attr('href'); // 把目前點擊到的 li 頁籤加上 .active // 並把兄弟元素中有 .active 的都移除 class $this.addClass('active').siblings('.active').removeClass('active'); // 淡入相對應的內容並隱藏兄弟元素 $(_clickTab).stop(false, true).fadeIn().siblings().hide(); return false; }).find('a').focus(function(){ this.blur(); }); }); }); |
這樣出來的頁籤(Tab)效果就已經蠻實用的,若美術設計能力夠的話,還能改用圖片的標籤來美化呢!
請問老師,最近我在WP上看到circle 3 slider,它好像把圖片跟文字分成3部分滑入滑出舞臺,請問文字的部分可以指定自己想要的中文字體嗎?如果可以指定中文字體,我想去下載免費的,或用買的circle 3 slider來玩.
沒看到你說的 circle 3 slider 是長怎樣, 不過若該文字部份只是單純的 html 內容的話, 是可以利用 css 改變字型的!
偉大的男丁老師!! 我在同個頁面要放兩個頁籤,把重複貼一次,再把 JavaScript改成最下面那一段,但頁籤還是沒辦法正常運作,我還需要修改哪裡呢?老師~~可以做成範例給我們看嗎?謝謝老師^^!!
文章中的最下面那段程式就是給多組頁籤用的了
謝謝老師^^!!!!!!!
但我的頁籤還是不正常耶...
html的部份就單純重複複製貼上嗎?
我看到範例2就是用兩個頁籤(抱歉剛剛沒看清楚)謝謝老師呦!!
不好,每一个ul li里a触发器还的必须对应一个tab内容的id!非常不好。
用id主要是可以搭配錨點的功能, 當然你要用相對應的順序也可以, 看設計的方向囉!
老師您好:假如我tab頁籤分成a,b,c三個標籤,然後我再開另一個網頁做3個超連結a,b,c分別都連進來有tab頁籤功能的這個網頁,然而我希望超連結進來就直接的show出他的對應標嵌(如:我點b連結連過來的網頁一開始就show出b頁籤),除了最糟糕的方法做3個一樣的頁籤網頁只是把它的 預設顯示第一個 Tab var _showTab = 0;改成相對應,然後在一一的連進各頁這方法之外,還有比較容易的解決方法麼?
另外謝謝老師的這篇教學!!
你可以參考"[jQ滑出式問與答(Q&A)清單"]的第 4 個範例的方式!
它也是利用網址傳入的 hash 來顯示相對應的內容
不好意思 我有試著寫 連結後 會全部show
可否教導一下 謝謝!!!
——————以下是我改寫的—-
簡單的做法就把前幾段換成
您好~我參考您這篇文章裡的程式改寫了一個功能放在我的網頁裡,請問要引用什麼說明文字(版權宣告之類)嗎?
不用特別引用什麼文字說明沒關係, 有提到就好!
謝謝您!
老師你好~
請問 如果我想要把內容顯示時,原本"淡出"的效果改成"左右划動"的切換效果
應該如何做呢?...
我想做出像這個網站 http://www.twenty2designs.com/ 切換頁面時的效果...
頁籤說穿了其實只是一種類似廣告的效果而已
你要滑動的話,可以參考 http://abgne.tw/jquery/apply-jquery/jquery-horizontal-slide-tabs.html 或範例中只要有左右移動的都雷同。
謝謝!!
不好意思我還想問 如果想要滑動頁面之後 點選上面的圖片
然後圖片出現的方式是lightbox的模式
等於需要兩個jquery同時存在
那麼是要改寫jquery的程式才能同時使用嗎?..
如果都是使用 jQuery 的話, 那麼 jQuery.js 的檔案只要引用一次就可以了
我把兩個jquery的js檔都掛進去了....頁籤的滑動效果沒問題,但lightbox的效果卻出不來..../_\
可以的話, 一樣是準備個有問題的範例, 寄給我試試~
請問一下,我想用4個tab,但是第四個總是不成功,前三個都可以,我需要改javascript 裡面的任何東西嗎?我的html code是
tab1
tab2
tab3
tab4
Tab Content 1
Tab Content 2
Tab Content 3
Tab Content 4
你第四個區塊的 id 是命名為 tab4 吧@@?
基本上應該只要放上相對應的標籤及區塊就可以了
如果真的還是有問題, 就把現在這有問題的範例寄給我看看!!
請問...如果有abc 三個標籤
但我要動態去預設要顯示那一個標籤..如有時是b,有時是c
請問要怎麼設定呢?
往前翻一下第 12 頁的留言, 有人問過也有回覆了!
不好意思,我目前把Tab的拿來當標籤用,
結果資料一多他就會產生第二行甚至第三行的Tab列出來
IE6的時候不會蓋到下面的元素
但IE8卻蓋住了
不知道是什麼屬性可以避開這個問題呢
畫面大概是這樣子
http://terry2942.rsonline.org/99.jpg
PS:tab_container這個div我沒有加入到程式裡面
能否弄一個簡單小巧且有問題的範例寄給我試試~
老師您好
我想問的是我有很多頁籤,在只有一列且寬度固定的情況下,後面頁籤的字理所當然地就會不見,有沒有辦法放按鈕就可以左右切換??