HashTabber: Tabbed Content Switcher

This is a simple JavaScript plugin for a hashchange-driven tabbed content switcher.

Here are the features of HashTabber:

• SCSS stylesheet
• Switching tabs with #foo=bar links
• Multiple simultaneous HashTabbers
• Flexible -nav & -data structure

The plugin also works on most browsers that users would come in contact with including Chrome 4+, Firefox 4+, Opera 12+, Safari 5+ and Internet Explorer 8+.

You need two files to start using HashTabber:

• hashTabber.js – with a single object inside and four helper functions; so you could as well just paste it to your script.js to avoid an unnecessary HTML request
• _hashTabber.scss – 20-something lines of code that would be best to just @include in your global.scss

Following the setup instructions is vital to making this plugin work, so pay close attention to the documentation. There’s an additional theme class as well for those sites running on a theme. (This will make everything come together a lot easier.)

This plugin has a few “hidden features” as well:

• Both ols could contain countless different nodes (h2 for example), as the script takes into account only lis inside of them
• Both ols could be placed within completely different HTML nodes, as the script uses the data-hashtabber-id attribute to pair them
• You can chain parameters in links: #foo=2&bar=1&fum=baz&qux=2&zot=3, to switch tabs for all instances of HashTabber simultaneously