Animated jQuery & CSS3 Hash-sensitive Tabs Plugin

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.