Home » jQuery 應用

[jQ]用 jQuery 做頁籤 – 水平滑動式頁籤

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

現在單純切換式的頁籤已經很普遍的使用在網頁中,很多人也許都看到無感了。所以筆者今天要介紹另一種有別一般水平滑動切換方式的頁籤,讓您的頁籤就是跟別人不一樣。

首先不可少的 HTML

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
<body>
	<div id="abgne-block-20120327">
		<ul class="tabs">
			<li><span>Happy Birthday</span></li>
			<li><span>Calculator Widget</span></li>
			<li><span>My Card</span></li>
		</ul>
		<div class="tab_container">
			<ul class="tab_content">
				<li>
					<img src="images/Happy_Birthday.png" alt="Happy Birthday">
					<h3>Happy Birthday</h3>
					<p>是否曾經因太忙碌而錯過好友的生日呢?此軟體能依日期列出全部含有生日設定的聯絡人清單,讓您快速掌握下一位生日的聯絡人。</p>
				</li>
				<li>
					<img src="images/Calculator_Widget.png" alt="Calculator Widget">
					<h3>Calculator Widget</h3>
					<p>是否常常想用計算機時都得要在一堆程式中尋找呢?「Calculator Widget」是一個可以把計算機放在桌面上的小工具程式,讓您可以直接立即使用並計算。</p>
				</li>
				<li>
					<img src="images/My_Card.png" alt="My Card">
					<h3>My Card</h3>
					<p>My Card 是一個簡單直覺使用的程式,可以讓您把各種有條碼(BarCode)的卡片建檔管理,並提供條碼小工具可直接放在桌面上。</p>
				</li>
			</ul>
		</div>
	</div>
</body>

整個排版跟在利用 jQuery 來製作網頁頁籤(Tab)很像但又不太一樣,主要是頁籤的部份並不使用錨點的方式,同時內容區塊的部份也都改用 ul li 來陳列。

接著直接套上 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
58
59
60
61
#abgne-block-20120327 {
	width: 640px;
}
#abgne-block-20120327 ul, #abgne-block-20120327 li {
	list-style: none;
	margin: 0;
	padding: 0;
}
#abgne-block-20120327 .tabs li {
	float: left;
	margin: 0 0 -1px 5px;
	border: 1px solid #ddd;
	background: #fafafa;
	height: 32px;
	cursor: pointer;
	border-radius: 5px 5px 0 0;
}
#abgne-block-20120327 .tabs li.active {
	background: #fff;
	padding-bottom: 1px;
	border-bottom: none;
}
#abgne-block-20120327 .tabs li.hover{
	background: #f5f5f5; 
}
#abgne-block-20120327 .tabs span {
	display: block;
	float: left;
	overflow: hidden;
	padding: 7px 15px 5px 15px;
}
#abgne-block-20120327 .tab_container {
	clear: both;
	border: 1px solid #DDD;
	background: #fff;
	overflow: hidden;
	border-radius: 5px;
}
#abgne-block-20120327 .tab_container ul {
	position: relative;
	height: 150px;
	overflow: hidden;
}
#abgne-block-20120327 .tab_container .tab_content li {
	position: absolute;
	width: 610px;
	height: 100%;
	padding: 15px;
	margin-top: 10px;
	background: #fff;
}
#abgne-block-20120327 .tab_container .tab_content li img {
	display: block;
	float: left;
	margin-right: 15px;
}
#abgne-block-20120327 .tab_container .tab_content li h3 {
	font-size: 22px;
	line-height: 22px;
	margin: 5px 0 15px;
}

若沒什麼問題的話,就能看到基本樣式哩~

再來水平滑動的部份就靠 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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
$(function(){
	// 預設顯示第一個頁籤
	// 並先把 .tabs, .tabs li 及 .tab_content, .tab_content li 等元素取出
	// 同時也要取得 .tab_content 的寬
	var _default = 0, 
		$block = $('#abgne-block-20120327'), 
		$tabs = $block.find('.tabs'), 
		$tabsLi = $tabs.find('li'), 
		$tab_content = $block.find('.tab_content'), 
		$tab_contentLi = $tab_content.find('li'), 
		_width = $tab_content.width();
 
	// 當滑鼠移到 .tabs li 上時要套用 .hover 樣式
	// 移出時要移除 .hover 樣式
	$tabsLi.hover(function(){
		var $this = $(this);
 
		// 若被滑鼠移上去的 li 是目前顯示的頁籤就不做任何動作
		if($this.hasClass('active')) return;
 
		$this.toggleClass('hover');
	}).click(function(){	// 當滑鼠點擊 .tabs li 時
		// 先取出被點擊及目前顯示的頁籤與索引
		var $active = $tabsLi.filter('.active').removeClass('active'), 
			_activeIndex = $active.index(),  
			$this = $(this).addClass('active').removeClass('hover'), 
			_index = $this.index(), 
			isNext = _index > _activeIndex;
 
		// 如果被點擊的頁籤就是目前已顯示的頁籤, 則不做任何動作
		if(_activeIndex == _index) return;
 
		// 依索引大或小來決定移動的位置
		$tab_contentLi.eq(_activeIndex).stop().animate({
			left: isNext ? -_width : _width
		}).end().eq(_index).css('left', isNext ? _width : -_width).stop().animate({
			left: 0
		});
	});
 
	// 先把預設要顯示的頁籤加上 .active 樣式及顯示相對應的內容
	$tabsLi.eq(_default).addClass('active');
	$tab_contentLi.eq(_default).siblings().css({
		left: _width
	});
});

滑動的部份是此範例較特別的地方,在依索引大或小來決定移動的位置時,不管是從第幾個頁籤跳到第幾個頁籤,一次就只換滑動一張就到達定位。


範例 1 範例 2

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定
加上自動輪播功能 會員限定

40 筆針對 [jQ]用 jQuery 做頁籤 – 水平滑動式頁籤 的迴響

  1. 老師你好!
    我想請問 將框框隨內容增加高度 要怎麼修改?
    試過overflow 和 height:100%
    #tabj .tab_container ul {height: 500px;}
    發現這裡只要不設高度(%和auto)就無法正常顯示。
    謝謝~

  2. 請問如果把兩個特效合在一起,
    例如使用http://abgne.tw/jquery/apply-jquery/slide-q-and-a-list.html
    的滑出式問與答(Q&A)清單, 而滑出來的時會內容為水平滑動式頁籤
    在ie 8 和chrome使用沒有問題,
    但是放在firefox中, 水平滑動式頁籤會失效, 完全無法換頁
    是因為重覆引用subpage/jquery-latest.min.js 的關係嗎?
    這樣該如何解決?
    謝謝

  3. 請教一下若不要有上面頁籤,
    而是讓內容(非圖片)可透過左右兩邊的箭頭換頁,
    這樣的功能一樣是用ul的方式嗎?
    謝謝

  4. 請問老師若是在tab_content 內放入iframe 會出現出不來的情況嗎?
    目前自己是有試過放入4的頁籤內都是iframe,除了第一個跑得出來 其他都消失了?
    是我要將iframe 的css做調整還是,要調整js??

  5. 老師你好, 想請問這種水平頁籤滑動的方式, 能否也應用在切換網頁呢?
    例如
    第一個頁籤下方呈現為1.html (網址列為1.html)
    點擊第二個頁籤下方滑動至2.html (網址列為2.html)

    謝謝

      • 但有的時候內容長度不一,所以需要每個網頁不同的長度,如:這個網頁這樣http://www.wix.com/website-template/view/html/712?originUrl=http%3A%2F%2Fwww.wix.com
        請問我該改變css裡面的什麼才能讓它這樣呢?

發表迴響