Introduction
Today, we are going to build a TAB interface. Well, not your ordinary TAB interface, this version come with history support. Yes, you can use Back and Forward button in your browsers, and also it has an URL for each TAB as well.
Sounds complicated? Don't worry, I always make sure my tutorial is simple and quick. We are going to use a plugin called jQuery Address plugin.
With jQuery Address plugin, we can produce virtual addresses that point to a website section. As a result, each TAB content in this tutorial can be bookmarked in a brwoser or social website, or can be sent via email or instant messenger. It also works with browser history and reload button. Tested with IE7, IE8, IE9, FF, Chrome and Safari.
HTML
Basically, we have two sections of HTML.

- #TABS: This section contains TAB items just like a navigation menu. You can set the page title by changing the TITLE attribute of Anchor Tag.
- #PANELS: This section contains content of each Panel, just like pages. The sequence of the panel must match with the item in TAB. For example, first Tab item displays first panel, second Tab item displays second panel and so on.
<div id="tabs" class="clearfix"> <ul> <li><a href="#tab1" title="Tab1 Title">Tab 1</a></li> <li><a href="#tab2" title="Tab2 Title">Tab 2</a></li> <li><a href="#tab3" title="Tab3 Title">Tab 3</a></li> </ul> </div> <div id="panels"> <div class="panel-wrapper"> <div class="panel"> <h2>Panel 1</h2> <p>Nullam in dui mauris. ......</p> <p> <a href="#tab2">Go to Tab2</a></p> </div> <div class="panel"> <h2>Panel 2</h2> <p>Nullam in dui mauris. ......</p><p> <a href="#tab3">Go to Tab3</a></p> </div> <div class="panel"> <h2>Panel 3</h2> <p>Nullam in dui mauris. ......</p><p> <a href="#tab1">Back to Tab1</a></p> </div> </div> </div> <!-- //#panels -->
CSS
A simple CSS to style up the TAB interface. You can change whatever you want, and selected Tab item is assigned an "active" class.
body { font-family:arial; font-size:75%; margin:10px; padding:0; } a { text-decoration:none; outline:none; } #container { width:600px; margin:0 auto; } #tabs ul { list-style:none; margin:0; padding:0; } #tabs ul li { float:left; } #tabs ul li a { display:block; padding:5px 10px; font-weight:bold; color:#aaa; text-decoration:none; font-size:120%; } #tabs ul li.active a { background:#ccc; color:#fff; } #panels { width:100%; background:#ccc; } #panels .panel-wrapper { padding:10px; } #panels .panel { } #panels .panel h2 { margin:0 0 10px 0; } .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html .clearfix { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1; } /* IE7 */ /* * CSS3 Styling */ #tabs ul li a { border-top-left-radius : 5px; border-top-right-radius : 5px; } #panels { border-bottom-left-radius : 5px; border-bottom-right-radius : 5px; }
Javascript
Thanks for the $.address plugin, it makes this tutorial less complicated. Basically, we have a function called setPanel that choose the correct Tab item and panel. If there isn't hashtag, this function will set everything to default, which is the first Tab item and first panel. Lastly, this function is attached to $.address plugin's init() and change() events.
To ensure you understand how exactly it works, I have put inline comment to explain what it does for each line of code.
var QTABS = { init: function () { // attached onload and change event to address plugin $.address.init(function(event) { // first load, set panel QTABS.setPanel(event); }).change(function(event) { // if the url changes, set panel QTABS.setPanel(event); }); }, // the core function to display correct panel setPanel: function (event) { // grab the hash tag from address plugin event var hashtag = event.pathNames[0]; // get the correct tab item, if no hashtag, get the first tab item var tab = (hashtag) ? $('#tabs li a[href=#' + hashtag + ']') : $('#tabs li:first a'); // reset everything to default $('#tabs li').removeClass('active'); $('#panels .panel').hide(); // if hashtag is found if (hashtag) { // set current tab item active and display correct panel tab.parent().addClass('active'); $('#panels .panel:eq(' + (tab.parent().index()) + ')').show(); } else { // set the first tab item and first panel $('#tabs li:first').addClass('active'); $('#panels .panel:first').show(); } // change the page title to current selected tab document.title = tab.attr('title'); } } // Execute this script! QTABS.init();
Conclusion
That's it, quick and easy. I enjoy create my own jQuery script, but sometimes it just not reasonable to reinvent the wheel. In this case, I used address plugin to speed up the development process. I hope you learn something from this tutorial and found this script useful for your project. If you have any question, drop me a comment. :)
Comments will be moderated and
rel="nofollow"
will be added to all links. You can wrap your coding with[code][/code]
to make use of built-in syntax highlighter.cheers,ikkez
Line 31: $('#panels .panel').stop().SlideUp('500');
Line38: $('#panels .panel:eq(' + (tab.parent().index()) + ')').stop().SlideDown('500');
The script works fine when I load the page by itself http://www.miskinminerals.com.au/stockists/#tab2. However if I try and link to the page / tab via a frame it doesn't open up the tabs.
http://www.miskinminerals.com.au/stockists/#tab2.
If you go to stockists and click on the drop down options you'll see what I mean.
Any ideas?
Great tab script btw ;)