Simple tabs with JQuery
- First Container
- Second Container
CSS
Create CSS styles for the HTML element where the user can click on to open the content and the containers with content. For this tutorial I used listed items for links and layers for content.
<style>
body {
font: 12px Arial, Helvetica, sans-serif;
}
#myDemoLinks {
display: block;
}
#myDemoLinks ul {
margin: 1em 0 0 0;
list-style-type: none;
padding: 3px 10px 0 10px;
}
#myDemoLinks ul li {
display: inline;
padding: 3px 4px;
background: #ccc;
margin-right: 5px;
cursor: hand;
}
#myDemoLinks ul li.myCurrentItemStyle {
display: inline;
padding: 3px 4px;
background: #333;
color: #fff;
margin-right: 5px;
cursor: hand;
}
#myDemoContainer {
margin:3px;
width: 440px;
height: 80px;
padding: 10px;
border: 1px solid #333;
}
#firstContainer {
background: #069;
color: #fff;
display: none;
height: 40px;
padding: 20px;
}
#secondContainer {
background: #00496C;
color: #fff;
display: none;
height:40px;
padding: 20px;
}
</style>
JQuery
Add a link to the JQuery file
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
The JQuery function
Create JQuery functions for each tab
<script>
$(document).ready(function(){
$("#firstContainer").show();
$("#firstLink").addClass("myCurrentItemStyle");
$("#myDemoLinks #firstLink").click(function () {
$("#firstContainer").show("slow").siblings(".demoContent").hide();
$(this).addClass("myCurrentItemStyle");
$(this).siblings(".links").removeClass("myCurrentItemStyle");
});
$("#myDemoLinks #secondLink").click(function () {
$("#secondContainer").show("slow").siblings(".demoContent").hide();
$(this).addClass("myCurrentItemStyle");
$(this).siblings(".links").removeClass("myCurrentItemStyle");
});
});
</script>
Add your elements on the page
<div id="myDemoLinks">
<ul>
<li class="links" id="firstLink">First Container</li>
<li class="links" id="secondLink">Second Container</li>
</ul>
</div>
<div id="myDemoContainer">
<div id="firstContainer" class="demoContent">First Container</div>
<div id="secondContainer" class="demoContent">Second Container</div>
</div>
Explanation
$(document).ready(function(){
This function should (be ready to) run when the page loads in the browser
$("#firstContainer").show();
The container with the id firstContainer should show
$("#myDemoLinks #firstLink").click(function () {
When the user clicks inside the container #myDemoLinks on the link with the id firstLink ...
$("#firstContainer").show("slow").siblings(".demoContent").hide();
... the container with the id #firstContainer should appear slowly on the screen. If you want to show the item without the animation you can remove the "slow" effect from $("#firstContainer").show("slow")by simply changing it to $("#firstContainer").show()
$(this).addClass("myCurrentItemStyle");
When the user clicks on this item addClass from my CSS styles named myCurrentItemStyle
$(this).siblings(".links").removeClass("myCurrentItemStyle");
When the user clicks on this item, removeClass from all the siblings, let the user know where he clicked on, but remove this style from other items.
The Whole Code from this tutorial
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple JQuery Tabs</title>
<style>
body {
font: 12px Arial, Helvetica, sans-serif;
}
#myDemoLinks {
display: block;
}
#myDemoLinks ul {
margin: 1em 0 0 0;
list-style-type: none;
padding: 3px 10px 0 10px;
}
#myDemoLinks ul li {
display: inline;
padding: 3px 4px;
background: #ccc;
margin-right: 5px;
cursor: hand;
}
#myDemoLinks ul li.myCurrentItemStyle {
display: inline;
padding: 3px 4px;
background: #333;
color: #fff;
margin-right: 5px;
cursor: hand;
}
#myDemoContainer {
margin:3px;
width: 440px;
height: 80px;
padding: 10px;
border: 1px solid #333;
}
#firstContainer {
background: #069;
color: #fff;
display: none;
height: 40px;
padding: 20px;
}
#secondContainer {
background: #00496C;
color: #fff;
display: none;
height:40px;
padding: 20px;
}
</style>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
$("#firstContainer").show();
$("#firstLink").addClass("myCurrentItemStyle");
$("#myDemoLinks #firstLink").click(function () {
$("#firstContainer").show("slow").siblings(".demoContent").hide();
$(this).addClass("myCurrentItemStyle");
$(this).siblings(".links").removeClass("myCurrentItemStyle");
});
$("#myDemoLinks #secondLink").click(function () {
$("#secondContainer").show("slow").siblings(".demoContent").hide();
$(this).addClass("myCurrentItemStyle");
$(this).siblings(".links").removeClass("myCurrentItemStyle");
});
});
</script>
</head>
<body>
<div id="myDemoLinks">
<ul>
<li class="links" id="firstLink">First Container</li>
<li class="links" id="secondLink">Second Container</li>
</ul>
</div>
<div id="myDemoContainer">
<div id="firstContainer" class="demoContent">First Container</div>
<div id="secondContainer" class="demoContent">Second Container</div>
</div>
</body>
</html>
Showing content without an animation
Simply remove "slow" from the script, from:
$("#secondContainer").show("slow").siblings(".demoContent").hide();
to
$("#secondContainer").show().siblings(".demoContent").hide();
If you use.siblings(".demoContent").hide("slow"); you will get another animation effect between slides, for example:
<script>
$(document).ready(function(){
$("#firstContainer").show();
$("#firstLink").addClass("myCurrentItemStyle");
$("#myDemoLinks #firstLink").click(function () {
$("#firstContainer").show("slow").siblings(".demoContent").hide("slow");
$(this).addClass("myCurrentItemStyle");
$(this).siblings(".links").removeClass("myCurrentItemStyle");
});
$("#myDemoLinks #secondLink").click(function () {
$("#secondContainer").show("slow").siblings(".demoContent").hide("slow");
$(this).addClass("myCurrentItemStyle");
$(this).siblings(".links").removeClass("myCurrentItemStyle");
});
});
</script>