男丁格爾's 脫殼玩

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

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

首先不可少的 HTML：

<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

檢視原始碼 CSS

#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

$(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 2 下一頁 »

cdavid 於 2012-03-30 14:27:56 說：

如可以在網址帶參數，直接跳到某一頁簽會更好~

登入後再回覆
- 男丁格爾於 2012-04-16 17:41:35 說：
  
  方式有很多種, 筆者使用 get 的方式, 請參考範例 2。
  
  登入後再回覆
Akou 於 2012-03-30 17:07:18 說：

男丁老師：針對有些網站，可以在手持裝置的瀏覽器上，使用手指頭滑動圖文區塊
這個效果應該朝什麼方向(或外掛?)去找呢? EX: 台灣YAHOO奇摩，就可以在手機上面用手指頭滑動內容

登入後再回覆
- 男丁格爾於 2012-04-16 17:43:06 說：
  
  jQuery Mobile 就有提供該事件了, 或者可以查查 "jQuery swipe"
  其它像是 Hammer.js 也不錯
  
  登入後再回覆
Mr.夫於 2012-04-03 17:17:34 說：

那這個也是可以做到自動輪播嗎？

登入後再回覆
- 男丁格爾於 2012-04-16 17:55:04 說：
  
  是可以啊, 只是我覺得如果依現在的方式來移動的話, 有點怪怪的XD
  
  登入後再回覆
奇摩又有新玩意於 2012-04-09 08:35:18 說：

男丁大大請看 http://tw.fun.theme.bid.yahoo.com/fun/play.html

奇摩又有新玩意..可否教學..感恩不盡

登入後再回覆
- 男丁格爾於 2012-04-16 19:09:08 說：
  
  這只是把兩個效果組合而已, 改天有空再來弄個組合技範例~
  
  登入後再回覆
  - 路過於 2012-04-26 12:43:11 說：
    
    那不是flash ??
    
    登入後再回覆
    - 男丁格爾於 2012-04-26 13:03:52 說：
      
      那一個?這範例是用 jQuery 做的哩~
      
      登入後再回覆
      - vicky1023 於 2012-05-30 15:51:24 說：
        
        男丁老師你好
        1.我把那兩支結合，但我用非常陽春方式，可以請問怎樣寫才會比較乾淨呢(關於分頁那兩支)
        
        2.若無放在這分頁時，都正常，但放分頁時，我若點選tab2的圖時，但點選回tabl時還是會停留在tab2的大圖(這關於切圖縮換)
        
        http://www.arkdesign.co.jp/test/test05.htm
        
        可以請男丁老師幫我看看嗎??
      - 男丁格爾於 2012-06-04 09:09:03 說：
        
        1.要改頁籤的程式改成外掛版才會比較方便。不過文章中的最下面那段程式就是給多組頁籤用的了~
        2.在你第一個頁籤做完切換的最後, 加上
        
        檢視原始碼 JavaScript
        1
        $('.cab_content').eq(_index).find('.album a').eq(0).mouseover();
      - vicky1023 於 2012-06-04 16:49:22 說：
        
        請問男丁老師，我這樣加可是也不對，cab1和cab2都會直接show出，請問我該如何修改
        
        $('.tab_content').eq(_index).stop(false, true).fadeIn().siblings().hide();
        $('.cab_content').eq(_index).find('.album a').eq(0).mouseover();
        
        http://www.arkdesign.co.jp/test/test.rar
      - 男丁格爾於 2012-06-06 08:58:58 說：
        
        檔案不存在了, 我記得回你時有試過應該是可以的~
    - vicky1023 於 2012-06-06 11:25:00 說：
      
      男丁老師，抱歉，我放錯檔名了http://www.arkdesign.co.jp/test/test.rar
      
      它是可以同時show tab和cab，但會變成cab1和cab2同時出現，且點tab1或tab2時，cab1,2都會同時變動!!
      
      登入後再回覆
      - 男丁格爾於 2012-06-06 13:50:26 說：
        
        已回信給你了, 下次範例請盡量弄的精簡或是把該附的 js 等等都一起提供。
      - vicky1023 於 2012-06-06 14:35:08 說：
        
        謝謝男丁老師，成功了!
        下次會注意讓檔案清楚點，謝謝:)
parker_chen 於 2012-05-02 18:32:48 說：

男丁老師你好！

我想問一下如果我要再頁籤裡的右邊放vedio，左邊插入表格做list，然後點選list讓他再右邊的vedio播放，這邊該如何實作呢??

登入後再回覆
- 男丁格爾於 2012-05-02 20:53:04 說：
  
  你現在能點 list 後播放影片了嗎?如果可以的話, 就直接把現在 list + 播放影片的 html 內容完整的放到 .tab_content li 中就可以了
  
  登入後再回覆
pazo 於 2012-05-16 01:23:32 說：

請問要如何改成淡入淡出的效果？另外請問男丁老師什麼時候才會再開課？謝謝！

登入後再回覆
- 男丁格爾於 2012-05-16 10:10:15 說：
  
  淡入淡入的可以參考利用 jQuery 來製作網頁頁籤(Tab)
  
  登入後再回覆
clareyao 於 2012-06-02 17:21:02 說：

請問同個頁面要放兩個以上這樣的頁籤，該如何修改設定呢？謝謝老師^^

登入後再回覆
- 男丁格爾於 2012-06-04 09:17:12 說：
  
  改寫成外掛的方式來使用是最方便的。若不知道怎麼改的話，那最簡單的方式就是取不同的 id，然後同樣的程式寫兩次~
  
  登入後再回覆
pinkyeight 於 2012-08-07 03:06:16 說：

男丁老師：我加入了連結在裡面，請問除了用同頁的方式來連結之外，我想要用 a href 的方式來連結，但是a頁面連結到b的那個頁面，本來b頁面設定繼續連結c的部份失效了。這是為什麼呢？

登入後再回覆
- pinkyeight 於 2012-08-07 03:07:29 說：
  
  用 a href的方式
  
  登入後再回覆
- 男丁格爾於 2012-08-08 10:25:22 說：
  
  這...可以弄個簡單的範例讓我試試嗎 XD
  
  登入後再回覆
村上健於 2012-08-15 17:29:18 說：

想請問男丁老師，如何加上翻頁button，類似Prev與Next的上下翻頁效果?

登入後再回覆
anna 於 2012-11-23 13:48:49 說：

男丁老師，我在第22行的地方把click改成mouseover後，發現tab_content下的各個LI區域原本是相互貼合在切換，但在頁籤快速遊走的時候，會有越分越開的現象，我應該要怎麼修改？

登入後再回覆