Horizontal Tabs simulates the interface of offline real world being accessed by each computer user. However, implementing tabbed navigation can be quite difficult sometimes, especially for non-developers.
If you are thinking to use the tabbed navigation then you can easily implement it through jQuery. Do you know how? Here, we will discuss how to implement the Horizontal Tabbed Navigation through jQuery. We will also put a highlight to add the implementation of effects like Collapse, Sorting, and Mouseover.
Let us start now from a blank html file. We are adding following default code to it:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery Tabs</title>
</head>
<body>
</body>
</html>
Now, we will link the default jQuery CSS and JS files with our HTML file.
<link type="text/css" href="jquery-ui-1.8.13.custom.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.13.custom.min.js"></script>
This is the time to add the script code to create the tab interface.
<script type="text/javascript">
$(function(){
// Tabs
$('#tabs').tabs();
});
</script>
This is the default script to create the tabs without any effects.
Now, we will create the tabs using ul and li tags, and add the contents in them. For this work, the jquery-ui-1.8.13.custom CSS file have the classes like tabs-1 for 1st Tab, tabs-2 for 2nd tab, and tabs-3 for 3rd tab. You can edit the CSS file to have more classes to create more tabs in your design. Following is the code to create three tabs:
<div id="tabs">
<ul>
<li><a href="#tabs-1">Google</li>
<li><a href="#tabs-2">Yahoo</li>
<li><a href="#tabs-3">Bing</li>
</ul>
<div id="tabs-1">
Content for Tab 1
<div>
<div id="tabs-2">
Content for Tab 2
</div>
<div id="tabs-3">
Content for Tab 3
</div>
After merging the complete HTML code will be as following. You can also copy this code for your work.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery Tabs</title>
<link type="text/css" href="jquery-ui-1.8.13.custom.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript">
$(function(){
// Tabs
$('#tabs').tabs();
});
</script>
</head>
<body>
<h1>Welcome to jQuery Tabs</h1>
<!-- Tabs -->
<h2 class="demoHeaders">Tabs</h2>
<div style="width:500px; height:auto; font-size:small;">
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
<li><a href="#tabs-3">Tab 3</a></li>
</ul>
<div id="tabs-1">
Content for Tab 1
</div>
<div id="tabs-2">
Content for Tab 2
</div>
<div id="tabs-3">
Content for Tab 3
</div>
</div>
</div>
</body>
</html>
Following will be the output of the tabs created with above code:
Full article...
