在網路知識爆炸的 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)效果就已經蠻實用的,若美術設計能力夠的話,還能改用圖片的標籤來美化呢!
老師:
想請問一下 頁籤的文字如果較多,請問如何讓它換行??謝謝!!
男丁大大:
標籤頁功能很實用謝謝你。
另外我有個問題,我在網頁加了計時器想要輪播,確時可以成功輪播,但我發現我需要的不只一個計時器,因為還有其他標籤頁的地方,而計時器都放在不同的function裡,後來發現好像會干擾,想說是奱數都叫timer的關係,因為我的網頁要放的東西太多了,我想將每一個計時器都一一取名好像太搞工了,有沒有聰明的寫法呢????
timer 還是得接才能控制啦, 不然就是用個陣列來接這些 timer 吧, 只要記好陣列的順序就好
老師~請問一下~若要在部分的tab上,加下拉式選單該怎麼作??
你要怎樣型式的下拉式選單?
http://twitter.github.io/bootstrap/javascript.html#tabs 像這樣
老師,我想請問,若我共有三個Tab,但是,第三個Tab有一個link,想要跳到第二個tab的某一個指定的,請問,該怎麼寫才可以達到?試了好久,實在是試不出來。
謝謝!
你好,若tab用圖表示,每個tab圖示不一樣,如何將每個tab分開設計?? 一直不開來>.<
您好~
非常感謝您的教學
不過我遇到一個問題
我用css寫的下拉式選單會被頁籤遮住
不知道有什麼解決的方法嗎?
謝謝!
你好,若tab用圖表示,每個tab圖示不一樣,如何將每個tab分開設計?? 一直不開來>.<
請問一下問題:敘述↓
舉例來說:假如有3個tab分別tab1.tab2.tab3,每個tab內容有圖片,圖片有連結。
例如:我在tab2內容裡面點選了A圖,連結到google網頁,回到上一頁,一定會回到tab1的內容,
不會回到原先tab2的內容,主要原因是var _showTab = 0;(預設第一個)這串語法的關係,如何改語法,才能回到tab2的內容?!!
拜託大大了!!
老師,我想請問,
若下面的內容我想用iframe來做
可是它的高度卻會被切掉 @@"
老師請教一下,
我每個頁籤(tab_content)裡還要再放一個頁籤的話,
該如何做呢?
麻煩您了,謝謝。
請問如果頁籤的數量很多,想在左右加個 < 和 > 來讓頁籤可以滑動,這個效果該怎麼做呢?