1 Simple Tabs Wed Oct 05, 2011 3:59 am
RockerMan
Technician
Simple Tabs Learn to make a set of simple tabs |
OK so, today we going to learn how to make a simple set of jQuery tabs. They are nothing to special and have very little styling. But you can edit the style to make them prettier OK, so start off with you basic HTML template:
OK, lets start the mark-up! Inside the <body> tags create an unordered list item with a class of tabs:
OK, now inside those tags you need to create some list items containing links, for this example I'll create 4 tabs:
OK, now to explain the above code ;
<a href="#" - This is a link leading to nowhere class="defaulttab" - Now this is to hilight the current tab, we will be playing with this piece of code when we move onto the Javascript rel="tabs1 - This is the link leadning to the content All this will become much more clear once you read the parts below! OK, so now we need to create the tab content, this is how: First we need to create a div with a class of tab-content and an id of the tab number you wish the content to be:
So now the part above with the rel="tabs1", should become a little more clear You would keep adding these divs until you have the total amount you want, incrementing the number by 1:
OK, now inside the script tags (inside the head) place this code:
Now because this script is based upon the jQuery library, you will need to include it inside the head tags too! OK, now that the mark-up is out of the way. We gonna' start styling:
The only thing you really need to change is the ul.tabs li a (This is targeting the unordered list in the element with a class of tabs, then it's finding the list item within that unordered list, the finding and links within that list item.) OK, so if you've do it correct you should have a document that looks like this:
Hope you enjoyed the tutorial and learnt something Rob |
Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators. |