[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

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

老師, 您好

感謝您提供的素材.

想請教老師一個問題,上方tab點選後,tab標題文字顏色需要改變.

在CSS更改文字顏色,沒有作用

ul.tabs li.active{

color: #27a9f6;

background-color:#f7f7f7;

}

爬過之前的相關文章,修改java,無法作用.

以下是Java

$(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();
});
});

請教老師要如何修改, 才能改變被點選的tab標題文字顏色?

感謝

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

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

喬治於 2012-09-10 16:53:20 說：

男丁老師您好：
　　想請問一下，範例3中點選到Blog tab時,會跳出新視窗,如果不要跳出新視窗,要直接在Blog tab下面出現此連結網頁? 要怎麼修改呢? 謝謝!

登入後再回覆
vicky1023 於 2012-09-27 17:14:43 說：

男丁老師
前面有人提到如果一開始不要顯示tab_container,待click再出現要怎麼用呢??
你說"那一開始就只要先把 .tab_content 隱藏起來就好"

請問具體如何寫呢?

登入後再回覆
- vicky1023 於 2012-09-27 17:20:28 說：
  
  啊~~，我找到了，謝謝!!
  
  登入後再回覆
esel 於 2012-10-16 17:49:01 說：

男丁大大,
先感謝您那麼精細的教學，真的是受益良多。
想請教我想做成網頁預先只載入TAB1，其他TAB等USER點擊才LOAD + loading圖示，
我應該往那個方向著手？JQUERY 有方便的外掛可使用嗎？

登入後再回覆
- 男丁格爾於 2012-11-16 22:59:40 說：
  
  jQuery UI 就有相關的 Tabs 可以使用~
  
  登入後再回覆
安安於 2012-12-03 10:56:51 說：

老師您好：
想請問一下，如果我的在tab2裡有分頁的功能，我點選第二頁或是其他頁的頁碼時，要怎麼做才不會又跑回tab1啊? 但是tab2的頁碼會跳至我選擇的頁數。
謝謝!!

登入後再回覆
shih527 於 2012-12-29 15:19:31 說：

老師您好:
我下載了你的範例檔
但是最後面那個檔案在IE9下
欄位都沒有被隱藏
不知道要如何修改?
謝謝

登入後再回覆
- shih527 於 2012-12-29 15:26:31 說：
  
  我好像搞錯了些東西
  我在試試
  幫我刪除
  不好意思
  
  登入後再回覆
伊戈於 2013-01-04 16:09:02 說：

男丁大大
你好，请教个简单的问题，假如有页签1，页签2，页签3，页签4，页签1里有个a标记，怎么链接到页签2？用Jquery怎么实现

登入後再回覆
kevin50406418 於 2013-02-24 15:36:54 說：

男丁大大
請問這些代碼授權方式是甚麼?

登入後再回覆
- 男丁格爾於 2013-02-26 21:10:12 說：
  
  只要不單獨拿去賣就好, 用在公司專案中是允許的!
  
  登入後再回覆
Dave Lee 於 2013-03-13 14:43:11 說：

老師, 您好

感謝您提供的素材.

想請教老師一個問題,上方tab點選後,tab標題文字顏色需要改變.

在CSS更改文字顏色,沒有作用

ul.tabs li.active{

color: #27a9f6;

background-color:#f7f7f7;

}

爬過之前的相關文章,修改java,無法作用.

以下是Java

$(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();
});
});

請教老師要如何修改, 才能改變被點選的tab標題文字顏色?

感謝

登入後再回覆
alex蕭於 2013-03-26 13:44:02 說：

老師:

想請問一下 POSTBACK後會回到預設的第一個TAB

前面好像有提到可以回到USER產生POSTBACK的方法請問有範例可以參考嗎?

卡在POSTBACK的問題上

謝謝

登入後再回覆
yennie 於 2013-04-23 21:50:43 說：

老師,請問如果我要將tab放在blogger, javascript的部分應該加在哪裡呢?謝謝!

登入後再回覆

發表迴響取消回覆

抱歉，你必須要登入才能發表迴響喔！

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

發表迴響 取消回覆

發表迴響取消回覆