Home1
Simple HTML & JS Tabs Fri Nov 11, 2011 2:18 am
RockerMan
Administrator
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, then 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
OK, so start off with you basic HTML template:
- Code:
<!DOCTYPE html>
<head>
<title>Example Page</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script type="text/javascript">
</script>
</head>
<body>
</body>
OK, lets start the mark-up!
Inside the <body> tags create an unordered list item with a class of tabs:
- Code:
<ul class="tabs">
</ul>
OK, now inside those tags you need to create some list items containing links, for this example I'll create 4 tabs:
- Code:
<ul class="tabs">
<li><a href="#" class="defaulttab" rel="tabs1">Tab 1</a></li>
<li><a href="#" rel="tabs2">Tab 2</a></li>
<li><a href="#" rel="tabs3">Tab 3</a></li>
<li><a href="#" rel="tabs4">Tab 4</a></li>
</ul>
OK, now to explain the above code
;- Code:
<li><a href="#" class="defaulttab" rel="tabs1">Tab 1</a></li>
<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:
- Code:
<div class="tab-content" id="tabs1">
<p>This is some example text!</p>
</div>
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:
- Code:
<div class="tab-content" id="tabs1">
<p>This is some example text!</p>
</div> <!-- end tabs1 -->
<div class="tab-content" id="tabs2">
<p>This is some example text!</p>
</div><!-- end tabs2 -->
<div class="tab-content" id="tabs3">
<p>This is some example text!</p>
</div><!-- end tabs3 -->
<div class="tab-content" id="tabs4">
<p>This is some example text!</p>
</div><!-- end tabs4 -->
OK, now inside the script tags (inside the head) place this code:
- Code:
$(document).ready(function() {
$('.tabs a').click(function(){
switch_tabs($(this));
});
switch_tabs($('.defaulttab'));
});
function switch_tabs(obj)
{
$('.tab-content').hide();
$('.tabs a').removeClass("selected");
var id = obj.attr("rel");
$('#'+id).show();
obj.addClass("selected");
}
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:
- Code:
ul.tabs { width:500px; margin:0; padding:0; }
ul.tabs li { display:block; float:left; padding:0 5px; }
ul.tabs li a { display:block; float:left; padding:5px; font-size:0.8em; background-color:#e0e0e0; color:#666; text-decoration:none; }
.selected { font-weight:bold; }
.tab-content { clear:both; border:1px solid #ddd; padding:10px; }
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, then finding and links within that list item.)
OK, so if you've do it correct you should have a document that looks like this:
- Code:
<!DOCTYPE html>
<head>
<title>Example Page</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
$('.tabs a').click(function(){
switch_tabs($(this));
});
switch_tabs($('.defaulttab'));
});
function switch_tabs(obj)
{
$('.tab-content').hide();
$('.tabs a').removeClass("selected");
var id = obj.attr("rel");
$('#'+id).show();
obj.addClass("selected");
}
</script>
</head>
<body>
<div class="tab-content" id="tabs1">
<p>This is some example text!</p>
</div> <!-- end tabs1 -->
<div class="tab-content" id="tabs2">
<p>This is some example text!</p>
</div><!-- end tabs2 -->
<div class="tab-content" id="tabs3">
<p>This is some example text!</p>
</div><!-- end tabs3 -->
<div class="tab-content" id="tabs4">
<p>This is some example text!</p>
</div><!-- end tabs4 -->
</body>
Hope you enjoyed the tutorial and learnt something
