30个Javascript和CSS标签切换Tabs效果案例

优秀设计资源 2010年09月09日

Tabs标签切换效果,在网页设计中的应用是很广泛的。今天收集了30多个,主要包括纯CSS的TAB切换效果、使用javascript搭配css制作的Tabs效果,以及最常用的使用jQuery实现的平滑滚动或特殊动态效果的Tabs切换效果。如果你想使用Tabs,那一定不要错过此文。

Pure CSS Tabs Tecniques & Tutorials

Sweet Tabbed Navigation Bar using CSS3

Sweet Tabbed Navigation Bar using CSS3

Sweet Tabbed Navigation Bar using CSS3 →

Demo →

CSS3-Only Tabbed Area

CSS3-Only Tabbed Area

CSS3-Only Tabbed Area →

Demo →

Using CSS to Create a Tabbed Content Area

Using CSS to Create a Tabbed Content Area

Using CSS to Create a Tabbed Content Area →

Demo →

CSS3 Hover Tabs without JavaScript

CSS3 Hover Tabs without JavaScript

CSS3 Hover Tabs without JavaScript →

Demo →

Javascript Based Tabs Tutorials

Sweet AJAX Tabs (jQuery)

Sweet AJAX Tabs (jQuery)

Sweet AJAX Tabs →

Demo →

Animated Tabbed Content (jQuery)

Animated Tabbed Content (jQuery)

Animated Tabbed Content →

Demo →

Sliding Tab Menu for Sidebar (jQuery)

Sliding Tab Menu for Sidebar (jQuery)

Sliding Tab Menu for Sidebar →

Demo →

Organic Tabs (jQuery)

Organic Tabs (jQuery)

Organic Tabs →

Demo →

Slot Machine Tabs (jQuery)

Slot Machine Tabs (jQuery)

Slot Machine Tabs →

Demo →

Create Flipping Content Tabs (jQuery)

Create Flipping Content Tabs (jQuery)

Create Flipping Content Tabs →

Demo →

Create A Tabbed Interface (jQuery)

Create A Tabbed Interface (jQuery)

Create A Tabbed Interface →

Demo →

jQuery UI Tabs with Next/Previous (jQuery UI)

jQuery UI Tabs with Next/Previous (jQuery UI)

jQuery UI Tabs with Next/Previous →

Demo →

Building a Better Blogroll: Dynamic Fun (jQuery & SimplePie)

Building a Better Blogroll: Dynamic Fun (jQuery & SimplePie)

Building a Better Blogroll: Dynamic Fun →

Demo →

Moving Tab and Sliding Content (jQuery)

Moving Tab and Sliding Content (jQuery)

Moving Tab and Sliding Content →

Demo →

Slick Tabbed Content Area (jQuery)

Slick Tabbed Content Area (jQuery)

Slick Tabbed Content Area →

Demo →

Sexy Animated Tabs (MooTools)

Sexy Animated Tabs (MooTools)

Sexy Animated Tabs →

Demo →

Tabbed Interface / Tabbed Structure Menu (jQuery)

Tabbed Interface / Tabbed Structure Menu (jQuery)

Tabbed Interface / Tabbed Structure Menu →

Demo →

Fancy Sliding Form (jQuery)

Fancy Sliding Form (jQuery)

Fancy Sliding Form →

Demo →

Simple Tabs (jQuery)

Simple Tabs (jQuery)

Simple Tabs →

Demo →

Javscript Based Tabs Plugins

mb.tabset (jQuery)

mb.tabset (jQuery)

mb.tabset is a useful component that lets you build a tabbed interface really quickly and easily; and you can even sort your tabs as you want by dragging and dropping.

mb.tabset →

Demo →

SimpleTabs (MooTools)

SimpleTabs (MooTools)

Small, simple and unobtrusive Tab plugin for MooTools including support for Ajax content. Overlays semantic XHTML markup with a tabbed interface without additional changes. Customise the style and behaviour by changing the simplified CSS or via various custom Events.

SimpleTabs →

Demo →

Perspective Tabs (Mootools)

Perspective Tabs (Mootools)

Perspective tabs (formerly Sliding Tabs) is a simple MooTools plug-in that allows for a lagre number of tabs to fit into a small space. Thanks for visiting my site.

Perspective Tabs →

Demo →

MooTabs (MooTools)

MooTabs (MooTools)

MooTabs is a tiny(3kb) class for MooTools. As the name suggests, it's main purpose is to help out with the creation of simple tab navigation. As of version 1.2, you can also set tab content via an Ajax request.

MooTabs →

Demo →

idTabs (jQuery)

idTabs (jQuery)

idTabs →

Demo →

DOMTab – Navigation tabs with CSS and DOMscripting

DOMTab - Navigation tabs with CSS and DOMscripting

DOMtab is a JavaScript that turns a list of links connected to content sections into a tab interface. The script removes any "back to top" links in the section and automatically hides all but the first one when the page is loaded. You can use as many tabbed menus on the page as you want to.

DOMTab – Navigation tabs with CSS and DOMscripting →

Demo →

jQuery UI Tabs

jQuery UI Tabs

jQuery UI Tabs →

Demo →

jQuery Accessible Tabs Plugin

jQuery Accessible Tabs Plugin

jQuery Plugin that generates a Tab Navigation from Markup that makes sense without Javascript. The generated Tabs are the only ones out there that work for Screenreader users without support for WAI ARIA.

jQuery Accessible Tabs Plugin →

Demo →

Tabify (jQuery)

Tabify (jQuery)

This Jquery plugin lets you easily create tabbed content. All you need is an ul-element with some li-elements and a couple of related content-divs. The major difference between Tabify and it’s competitors is it’s size.

Tabify (jQuery) →

Demo →

nanotabs

nanotabs

nanotabs →

Demo →

jQuery Pager

jQuery Pager

jQuery Pager →

Demo →

jQueryGlobe

jQueryGlobe

This tiny (2kb) slick jQuery plugin enables simple and easy creation of an interactive "Featured Items" widget.

jQueryGlobe →

Demo →

网友评论
Top