﻿# 分享 30 多種動態的頁籤(Tab)介面與 Accordion 相關程式

我想大家都知道何謂頁籤(Tab)頁面，不過你知道網路上大家都怎麼使用頁籤嗎？最近看到一則 [30+ Animated Tab-Based Interface and Accordion Scripts](http://dzineblog.com/2008/10/30-animated-tab-interface-and-accordion-scripts.html) 文章，裡面介紹了 30 多種頁籤介面，每一個頁籤介面都有原始碼可以下載，也都有提供預覽(Preview)頁面可供線上測試，多看看別人的創意，自己也會想出不少新點子。

底下擷取幾個我覺得還蠻新奇的範例圖示，其他的各位可以點進[文章](http://dzineblog.com/2008/10/30-animated-tab-interface-and-accordion-scripts.html)看看，並下載回來試試：

[**CSS Play Mini Tabs**](https://web.archive.org/web/20230513200303/http://www.cssplay.co.uk/menus/mini_tabbed_pages.html)

![CSS Play Mini Tabs - Yahoo style Drop Down Tab Interface](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/335cad338946d7b6dc04-image_3.png)

**Sliding Tabs** \[ 下載 \] \[ 預覽 \] \[ 原始碼 \]

**![Sliding Tabs - Sliding Tabs is a mootools 1.11 plugin which adds a pretty neat effect. It’s a clone of something seen on Panic Software’s Coda site](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/1f7011f04b7003c2ff99-image_9.png)**

**[Ajax Tabber](http://dhtmlx.com/docs/products/dhtmlxTabbar/index.shtml)** \[ [下載](https://dhtmlx.com/docs/products/dhtmlxTabbar/) \] \[ [預覽](http://dhtmlx.com/docs/products/dhtmlxTabbar/index.shtml) \] \[ [原始碼](http://dhtmlx.com/docs/products/dhtmlxTabbar/index.shtml) \]

![Ajax Tabber - This Ajax-enabled UI component lets you add feature-rich and nice looking tabs to your site or web application.](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/588208a7dcf1b0447bc1-image_6.png)

**相關文章**

-   [30+ Animated Tab-Based Interface and Accordion Scripts](http://dzineblog.com/2008/10/30-animated-tab-interface-and-accordion-scripts.html)
