Jquery has really made life very easy for javascript programmers. Traditionally we used to create tabbing in a website page using javascript show /hide methods. But always used to stuck with browser compatibility bugs.
If firefox displays tabs correctly then it will create problems in IE. Now we have left everything over to jquery. Jquery is the best open source javascript library which is compatible with all the browsers. So you dont have to worry regarding the compatibility issues.
One of the very easy script is Tabbing. You just have to create simple DIV and UL/LI tags and leave everything over to Jquery to perform tabbing sequence. EASY!!!!!!
You dont have to do anything else other than just play around with the CSS to make the tabs more attractive.
Its really very simple. Let me explain-
Click here to view this in action
<div class=”tabs”>
<ul class=”tabNavigation”>
<li><a href=”#first”>First</a></li>
<li><a href=”#second”>Second</a></li>
<li><a href=”#third”>Third</a></li>
</ul><div id=”first”>
<h2>First</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id=”second”><h2>Second</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
<div id=”third”>
<h2>Third</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
You just have to place correct ID’s while creating the HTML tags.
<div class=”tabs”> -> The parent div with class tabs. Will contain all child tabs.
<ul class=”tabNavigation”> -> This means that this UL contains clickable headings.
Sequentially, the tab headings HREF will contain link to #first, #second etc.. tabs.
<div id=”first”>, <div id=”second”>, will contain the HTML data viewable on the click of the heading.
Just notice, that if the heading contains #first id then corresponding div id should also be “first”.
It is a really good read for me, must admit that you’re one of the best bloggers I ever saw. Thanks for posting this informative article UncleCode.Com – Technology Blog | Jquery Tabbing, Create Tab in a page using Jquery easy to use script . Keep up the great work, I’ve added you to my blogroll.
Kudos to you! This is a really good blog here and I love your style of writing. How did you get so good at blogging?
Merely want to say your article is awesome. The lucidity in your post is simply spectacular and i can assume you are an expert on this subject. Well with your permission allow me to grab your rss feed to keep up to date with incoming post. Thanks a million and please keep up the effective work.
Thanks for the cool and lightweight Jquery tabbing code.
Easy to use and customize.
oh my god!! finally i got this script. Thanks to author!!!