現在單純切換式的頁籤已經很普遍的使用在網頁中,很多人也許都看到無感了。所以筆者今天要介紹另一種有別一般水平滑動切換方式的頁籤,讓您的頁籤就是跟別人不一樣。
首先不可少的 HTML:
檢視原始碼 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
檢視原始碼 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 }); }); |
滑動的部份是此範例較特別的地方,在依索引大或小來決定移動的位置時,不管是從第幾個頁籤跳到第幾個頁籤,一次就只換滑動一張就到達定位。
老師你好!
我想請問 將框框隨內容增加高度 要怎麼修改?
試過overflow 和 height:100%
#tabj .tab_container ul {height: 500px;}
發現這裡只要不設高度(%和auto)就無法正常顯示。
謝謝~
請問如果把兩個特效合在一起,
例如使用http://abgne.tw/jquery/apply-jquery/slide-q-and-a-list.html
的滑出式問與答(Q&A)清單, 而滑出來的時會內容為水平滑動式頁籤
在ie 8 和chrome使用沒有問題,
但是放在firefox中, 水平滑動式頁籤會失效, 完全無法換頁
是因為重覆引用subpage/jquery-latest.min.js 的關係嗎?
這樣該如何解決?
謝謝
要先看有沒有 script 錯誤, 不過 jQuery 是不需要重覆引用
請教一下若不要有上面頁籤,
而是讓內容(非圖片)可透過左右兩邊的箭頭換頁,
這樣的功能一樣是用ul的方式嗎?
謝謝
老師好,我也是遇到內容高度 的問題!
請問有解嗎?
會請指導,感恩 🙂
老師你好
請問下來式選單的連結 可以利用命名錨點到頁籤裡嗎?
試了幾次都是顯示找不到
請問老師若是在tab_content 內放入iframe 會出現出不來的情況嗎?
目前自己是有試過放入4的頁籤內都是iframe,除了第一個跑得出來 其他都消失了?
是我要將iframe 的css做調整還是,要調整js??
老師你好, 想請問這種水平頁籤滑動的方式, 能否也應用在切換網頁呢?
例如
第一個頁籤下方呈現為1.html (網址列為1.html)
點擊第二個頁籤下方滑動至2.html (網址列為2.html)
謝謝
老師你好!
我也想請問如何讓內容高度,隨著文字增加而增加
謝謝:)
如果是每個 li 的內容高度都不一樣的話, 這樣滑動不是很不好看嗎@@?
但有的時候內容長度不一,所以需要每個網頁不同的長度,如:這個網頁這樣http://www.wix.com/website-template/view/html/712?originUrl=http%3A%2F%2Fwww.wix.com
請問我該改變css裡面的什麼才能讓它這樣呢?
老師您好:
如果想要在手機版上呈現,該如何修改才好?
謝謝