Animated jQuery & CSS3 Hash-sensitive Tabs Plugin
File Size: | 180 KB |
---|---|
Views Total: | 4677 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Hash Tabs is a robust jQuery tabs plugin for creating tabbed interfaces that supports hash-friendly URLs and comes with tons of CSS3 powered animations. It is hash-sensitive so the tabs states are saved when you refresh the page.
Basic Usage:
1. Load the required jQuery hash tabs plugin's CSS into the head section.
<link rel="stylesheet" href="src/css/jquery.hash-tabs.css">
2. Markup Html structure.
<div class="demo"> <article class="tab-container"> <nav class="tab-nav"> <li><a href="#tab1" title="Tab 1">Tab 1</a></li> <li><a href="#tab2" title="Tab 2">Tab 2</a></li> <li><a href="#tab3" title="Tab 3">Tab 3</a></li> <li><a href="#tab4" title="Tab 4">Tab 4</a></li> </nav> <div class="tab-pane-container"> <section id="tab1"> <header> <h1>Tab 1</h1> </header> <p>This is content for tab 1</p> </section> <section id="tab2"> <header> <h1>Tab 2</h1> </header> <p>This is content for tab 2</p> </section> <section id="tab3"> <header> <h1>Tab 3</h1> </header> <p>This is content for tab 3</p> </section> <section id="tab4"> <header> <h1>Tab 4</h1> </header> <p>This is content for tab 4</p> </section> </div> </article> </div>
3. Load the jQuery javascript library and the jQuery hash tabs plugin at the end of the page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="src/jquery.hash-tabs.js"></script>
4. Initialize the tabs with default parameters.
$demo = $(".demo").hashTabs()
5. All the default parameters.
tabPanelSelector: "section", tabNavSelector: "nav", tabButtonSelector: "a", /* @property [Integer] initial tab's index to show when the tabs are initialized @note Initial tab will default to first tab, or index of 0 @note You must provide a non-negative Integer within the range of the current active tabs */ initialTabIndex: 0, /* @property [String] (optional) initial tab's `id` or hash to show when tabs are initialized @example tab2 @note You must provide a non-negative Integer within the range of the current active tabs */ initialTabId: null, /* @property [String] class to append to initialized hash tabs @note Styles are applied using the `.hash-tabs` class. Expect unexpected output if you override this setting */ tabContainerClass: "hash-tabs", /* @property [Boolean] whether keyboard navigation is enabled @note anchor tag tab element must be selected (using tab) in order for keyboard navigation to work @note keyboard navigation binds to the left and right arrow keys on the keyboard */ keyboard: true, /* @property [Boolean] whether to apply smooth scrolling, in which the screen scrolls up to the top of the tab navigation panel when any tab is clicked @note Enabling smooth scrolling will override the default browser behaviour, in which the browser "jumps" to the top of an anchor */ smoothScroll: { enabled: false, offset: 100, duration: 1000 }, /* @property [Boolean] whether to enable html5 history API to navigate back/forwards amongst selected tabs @note Defaults to `false` on non-html5-supported browsers */ history: true, debug: false
6. Supported CSS3 animations.
- Bounce
- Fade
- Filters
- Flip
- Roll
- Rotate
- Special
Change log:
2016-05-16
- Remove console.log from production
- Prefer hash in pushState over full URL
This awesome jQuery plugin is developed by srsgores. For more Advanced Usages, please check the demo page or visit the official website.