hashTabber is a simple JavaScript plugin for a hashchange-driven tabbed content switcher. Personally I'm not a tabsphiliac, but I needed those a few times recently and decided to make a semi-universal solution.

Quick run-down of features:

• Vanilla JavaScript
• SCSS stylesheet
• Switching tabs with #foo=bar links
• Multiple simultaneous hashTabbers
• Flexible -nav & -data structure
• Tested and working on those browsers:
  • Chrome 4+ (iOS 33+)
  • Firefox 4+
  • Opera 12+
  • Safari 5+ (iOS 7+)
  • IE 8+

buyutucu pompa Spanish Fly

Source: hashtabber.smutnyleszek.com

1. INCLUDE JS FILES

<script src="http://hashtabber.smutnyleszek.com/assets/js/libraries/hashTabber.js"></script>

2. HTML

<ol class="hashTabber-nav" data-hashtabber-id="foo">
    <li><a>First item</a></li>
    <li><a>Second item</a></li>
    <li><a>Third item</a></li>
</ol>
<ol class="hashTabber-data" data-hashtabber-id="foo">
    <li>This is the first item content.</li>
    <li>This is the second item content.</li>
    <li>This is the third item content.</li>
</ol>

Important things for the whole thing to work are:

• data attribute – the script will be pairing ol.hashTabber-nav and ol.hashTabber-data elements that share thedata-hashtabber-id attribute value, and will use it to generate links for tabs
• children – the script assumes that ol.hashTabber-nav and ol.hashTabber-data both have immediate child nodes li, and pairs up two of them with the same index or a special pair-name attribute
• links – every navigation list element ol.hashTabber-nav > li needs to have an immediate child node a for#foo=tab hrefs creation

3. JAVASCRIPT

var tabber = new HashTabber();
tabber.run();

4. OPTIONS

For some special situations you can define any of the options for classes and data attributes names through thehashTabber() options object parameter:

var tabber = new HashTabber(options = {
    classActive: 'active',
    classData: 'hashTabber-data',
    classNav: 'hashTabber-nav',
    dataDefault: 'data-hashtabber-default',
    dataId: 'data-hashtabber-id',
    dataPair: 'data-hashtabber-pair',
});

You can define some special options through the HTML data attributes:

• data-hashtabber-default – defined for ol.hashTabber-nav changes the default tab from 0 to given value (a number or a pair-name)
• data-hashtabber-pair – defined for two lis from both ols gives them a special #foo=name link instead of a standard numerical one

5. THEMES

This is something rather varied, but with theming, I would personally go with an additional hashTabber-themenameclass for both ols. This blank example could be a good start:

ol.hashTabber-nav.hashTabber-themename {
    > li {
        &.active {
            a {
                &:hover {
                }
            }
        }
        > a {
            &:hover {
            }
        }
    }
}
ol.hashTabber-data.hashTabber-themename {
    > li {
        &.active {
        }
    }
}