Home » jQuery 應用

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

[ 日期： | 瀏覽：349,206 | 迴響：305 ]
範例 1
範例 2
範例 3
請協助我把這個效果加到我的網站 (只要 1,200 元)
沒錯!只要 1,200 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

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



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

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

檢視原始碼 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)的功能。

檢視原始碼 CSS
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 來實做出完整的頁籤效果囉：

檢視原始碼 JavaScript
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 個頁籤區塊的設定：

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

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

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

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

1 2 3 4 5 … 8 9 10 11 12 … 14 15 16 17 18

  1. 男丁格爾老師您好：
    我蠻喜歡您做的範例四那種頁籤效果，所以將您的例子改了一下...發現範例四的頁籤在滑鼠移上去時，想說讓它像按鈕一樣有背景+字一起變色的效果，但我不管怎麼改css字色，都會讓作用中的頁籤標題和沒有在作用中的頁籤標題字色相同，不知道要怎麼才能讓只被選取的頁籤改變字體的背景和顏色呢？
    ...
    以及頁籤下面那條黑線@@"(不要有外框的樣式關閉後，卻出現那條黑線，怎麼樣也關不起來...)

    另外，不知道範例四的頁籤是否能夠套用http://abgne.tw/jquery/apply-jquery/jquery-animate-menu-2.html範例二的那種跳動動畫呢？請問～應該如何修改？
    (PS.我的JS、JQ能力都很弱@@6)

    • 改作用中的字的顏色

      檢視原始碼 CSS
      1
2
3

      ul.tabs li.active a {
	color:red;
}

      下方黑線主要是 border-bottom

      檢視原始碼 CSS
      1
2
3
4

      ul.tabs li.active  {
	background: #be9c5c;
	border-bottom: 1px solid #be9c5c;
}

      另外, 這兩個範例要結合是可以啦, 只是頁籤的部份要修改一下排版

  3. 請問如果是這個範例有辦法製作成頁籤在左邊嗎???

    然後右邊呈現另一個菜單這樣子，然後菜單往下排列，試了好久說ˊˋ

    • 會滑那麼高主要是因為 adHeight 設定成 220 的關係, 像改成 110 也許看起來就正常
      但如果你每頁的選項都不固定時, 程式就要能自動抓到正確的高度才有用
      且我覺得 html 及 css 的排版也都要改

  6. 男丁老師你好，我也是超初級新手
    想請教一個問題
    我在每個tab加上了id，想在連結後面加上#id時，連過去就可以直接秀出那tab的內容，可是試的結果永遠都只是開啟第一個tab內容，請問要如何用才能達到這個效果?謝謝

    • 你的裡面是指頁籤本身還是內容本身呢?
      如果是頁籤本身的話, 建議直接幫 li a 加上背景圖片就好

  8. 南丁老師你好;
    我使用了2組頁籤區塊;
    我的問題是,我想要改變第2組頁籤
    ul.tabs li {
    float: right; //第一組為float: left;
    }

    但是第一組也跟著改變了..

    感謝你無私的分享..謝謝

    是否要

  9. Q1. 如果一開始不要顯示文章內容,待滑鼠移入後再出現要怎麼用呢??
    Q2. 滑鼠移開後再隱藏文章要怎麼用??

    感謝!

  10. Dear 男丁大:您好!
    下列語法不知是何意？為何 "$(this)," 後會有逗號? "_clickTab " 的底線是否與斷行有關? 煩請您指導!感謝！

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

    • 逗號是因為我要一次宣告多個變數, 至於變數名稱前面有底線..這只是我的習慣(私有變數的話)

1 2 3 4 5 … 8 9 10 11 12 … 14 15 16 17 18

發表迴響