[jQ]利用 jQuery 來製作網頁頁籤(Tab)

沒錯!只要 1,200 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

在網路知識爆炸的 Web 2.0 時代，一個頁面上要顯示的資訊越來越多，但總不可能把全部的內容都一次顯示出來塞滿整頁吧！所以就出現了頁籤(Tab)這樣的展示方式。

每個標籤都有相對應的內容區塊，這樣只要一個小小的位置能放置的資訊就會比原先的更多，就像是原本只是一層矮平房，現在把它蓋成 101 大樓一樣！

廢話不多說，讓我們先來看看 HTML 的部份吧：

檢視原始碼 HTML

<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)的功能。

檢視原始碼 CSS

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 來實做出完整的頁籤效果囉：

檢視原始碼 JavaScript

$(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 個頁籤區塊的設定：

檢視原始碼 JavaScript

$(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)效果就已經蠻實用的，若美術設計能力夠的話，還能改用圖片的標籤來美化呢！

範例 1 範例 2 範例 3 範例 4

檔案描述
基本的範例檔案(免空)	開始下載
基本的範例檔案	會員限定
自動輪播切換頁籤	會員限定

305 筆針對 [jQ]利用 jQuery 來製作網頁頁籤(Tab) 的迴響

« 上一頁 1 2 3 4 5 … 9 10 11 12 13 14 15 16 17 18 下一頁 »

Jacky 於 2011-12-02 10:05:58 說：

您好，想請教一下
現在我將ul設定一定寬度
但我有7.8個頁籤，導致超過範圍的頁籤會自動跑到第二行
有辦法用jcarousel這種效果，在左邊跟右邊設置按鈕
將頁籤只有一行的狀態，並可以藉由按鈕去看到範圍外的頁籤嗎?

登入後再回覆
- 男丁格爾於 2011-12-08 13:15:04 說：
  
  可以, 但是你要在 ul li 頁籤外面再包一層元素才行
  
  登入後再回覆
大毛於 2011-12-02 14:41:44 說：

請問男丁格爾老師一下...
我做了一個TABs,我必須在切換到某一我要投票頁籤時做一個檢查動作,像是檢查有沒有完成報名程序啦,如果沒有完成,我會切會我要報名的頁籤請他完成報名程式,這在jQ中要如何設定從目前的頁跳轉到我要報名頁呢?
部份程式碼如下:

活動介紹
 我要報名
 我要投稿
 我要投票
 分享活動

麻煩請老師解答一下....^^

登入後再回覆
- 男丁格爾於 2011-12-08 13:26:54 說：
  
  這...這動作要看你的 html 排版哩, 可以的話就把整個檔案寄給我試試~
  
  登入後再回覆
ara 於 2011-12-22 13:55:11 說：

請問一下男丁格爾老師
admin_article.php有做兩個頁籤
文章管理和回應管理
回應管理是連到別的頁面admin_comEdit.php編輯的
在admin_comEdit.php頁面想放個按鈕
回到回應管理的頁籤
因為我預設是顯示文章管理的頁籤
按鈕的onclick事件javascript函數設定
該怎麼寫?可給個方向嗎?
謝謝!!

登入後再回覆
- 男丁格爾於 2011-12-22 14:00:05 說：
  
  可以利用錨點的方式。在程式要開始產生頁籤時，若有找到錨點時，則用該錨點的區塊當成預設的。
  
  登入後再回覆
Cindy 於 2011-12-23 14:37:55 說：

請問男丁格爾老師，
我在網頁中製作了兩個TAB(TAB1、TAB2)
但只要點選TAB2內容中的按鈕後就會跑回預設的TAB1，
該如何設定:點選TAB2內容中的按鈕後不跑回預設的TAB1，
謝謝!

登入後再回覆
- 男丁格爾於 2011-12-23 14:39:41 說：
  
  我不太知道你的效果是怎麼做的，可以的話把檔案寄給我試看看!
  
  登入後再回覆
QJ 於 2011-12-26 23:15:51 說：

老師你好,
如果要達到滑鼠移入後顯示內容 ,滑鼠移開後隱藏內容
這樣的語法要怎麼寫呢？

感謝您的回復

登入後再回覆
- 男丁格爾於 2011-12-30 20:27:01 說：
  
  大概動作如下...
  當滑鼠移上(mouseover)頁籤時展開, 接著...當滑鼠移出(mouseleave)整個區塊時(要以區塊為主)才能觸發隱藏的動作。
  
  登入後再回覆
Yes 於 2012-01-04 14:44:09 說：

您好，我想請問一下如何把淡入的效果拿掉呢？
麻煩您了，謝謝。

登入後再回覆
- 男丁格爾於 2012-01-04 15:29:17 說：
  
  把 .fadeIn() 及 .fadeOut() 改成 .show() 及 .hide() 就可以了。
  
  登入後再回覆
Lawrence 於 2012-01-04 17:12:18 說：

您好,
看過回覆的第三頁, 想做一個輪播效果, 可以提供一個詳細一點的教學嗎?
謝謝

登入後再回覆
- 男丁格爾於 2012-01-05 09:25:00 說：
  
  自動輪播的功能其實都是大同小異的, 先參考這篇:仿 Yahoo 標籤式垂直廣告輪播
  
  登入後再回覆
  - 笨小孩於 2012-01-05 14:26:46 說：
    
    謝謝您!
    引用文章中的輪播Java script, 要改id和class之外, 還要注意甚麼了?
    因為我就是改了這兩個之後還是不行 ..
    跟mouseover 和click有關係嗎?
    
    登入後再回覆
    - 男丁格爾於 2012-01-09 15:36:10 說：
      
      我最常用的方式是寫一個方法來控制切換下一個頁籤
      所以只要指定的時間到了, 就執行切換的方法就可以了。
      
      登入後再回覆
coolkid 於 2012-01-04 19:02:06 說：

// 找出 li 中的超連結 href(#id)
var $this = $(this),
_clickTab = $this.find('a').attr('href');

關於大大說的這段....我不知道適不適用在我的用法...
我是使用類似Yahoo廣告輪播...其它都沒問題,當mouseover到tab,畫面會顯示該資訊的圖片及簡文,但我在簡文裡最後有...(詳全文)這個連結字眼,要如何再指定詳全文這個字眼的連結到我要的地方呢?而且要各個tab的顯示簡文裡的"詳全文連結"都各自連到不同的位址...希望大大能夠解惑,感激~

登入後再回覆
- 男丁格爾於 2012-01-05 09:23:24 說：
  
  這段程式應該跟你要的詳全文並沒有關係。
  你的簡介及詳全文的部份應該是預先寫好的 html 而已。
  
  除非你現在的排版不是這樣, 那可能就要看到你的範例才知道要怎樣加入。
  
  登入後再回覆
  - coolkid 於 2012-01-06 10:55:57 說：
    
    大大您好....根據前面所述的"詳全文連結"問題,可否請大大幫忙看一下此頁我的試作頁面,這是已經放上去的輪播機制,原本是引用jquery1.3.2後來我把它引用到jquery1.4...(其實沒啥差別,只是想好像1.4版的較強)這樣是不是就可以加上詳全文的link呢? 要怎麼加進去呢?
    
    登入後再回覆
    - 男丁格爾於 2012-01-09 15:38:40 說：
      
      我不太懂你的詳全文是要怎樣做, 如果只是一個內容連結的話, 其實就跟程式沒任何關係。
      
      可以的話就弄個最後要呈現的圖來看看吧XD
      
      登入後再回覆
      - coolkid 於 2012-01-10 14:17:28 說：
        
        我只是要link到網頁而已啊....有這麼難了解嗎..嗚~~只是我找不到link語法要加在哪裡? 因為加上去都會變成在左列點選的地方出現...而我是要點選左列項目使其右方出現對應的內容的圖及文字,而其文字內的"詳全文"要能連結到另一個網頁....這樣粉難懂嗎...我也已經放上頁面了,您看到畫面應該就粉清楚啊..
      - 男丁格爾於 2012-01-10 14:58:03 說：
        
        你...你並沒有說是放在那個頁面, 且如果你說的頁面是指留言中的網址的話
        我看到你首頁那個效果應該是從梅干那邊的吧, 如果你說的頁籤是指這效果的話, 它那個頁籤跟你現在留言所在的這篇文章的頁籤寫法大不同
        當然我就不懂只是一個超連結而已為什麼你會搞不定了!!
        
        回到主題, 因為梅干那個範例是用超連結的 rel 來當內容描述, 所以你要把詳全文真的加上連結時, 應該要把
        
        檢視原始碼 HTML
        1
        <a href="#">（詳全文）</a>
        
        其中的 # 換成你要的網址
        
        檢視原始碼 HTML
        1
        <a href="http://abgne.tw/">（詳全文）</a>
      - coolkid 於 2012-01-13 15:39:28 說：
        
        啊....原來只是代數這樣的概念啊...我怎麼這麼笨沒想到說~~謝謝南丁大大...我的問題已經解決了..您真是個好人,祝福您新的一年,生意興隆,學生爆滿...
Yes 於 2012-01-05 00:01:55 說：

感恩^^

登入後再回覆
笨小孩於 2012-01-08 19:29:29 說：

謝謝您!
引用您 2012-01-05 09:25:00的文章中的輪播Java script, 要改id和class之外, 還要注意甚麼了?
因為我就是改了這兩個之後還是不行 ..
跟mouseover 和click有關係嗎?

登入後再回覆
- 男丁格爾於 2012-01-09 15:41:19 說：
  
  仔細看這些輪播的範例, 通常我都是用一個方法來控制切換的。
  接著只要定時執行切換的方法就可以了。
  
  登入後再回覆