Mick Redman: tabbed

Thursday, 12 August 2010

Simple tab navigation using jQuery

Below is the code for a very simple jQuery tabbed navigation. To make this work on your own setup, you will also need to create subPage1.html, subPage2.html and subPage3.html, but other than that, you're away. You should need to download jQuery because it is being referenced from Google. There is a little CSS, just to, layout the tabs and show how the hover works.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tabbed Navigation</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
#subSystem
{
margin:0 auto;
width:400px;
}
#subNav a.subMenu
{
display:block;
text-decoration: none;
float:left;
text-align:center;
width:80px;
height:40px;
padding:4px;
border-top:1px solid #CCCCCC;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
color:#000000;
}
#subNav a.subMenu:hover
{
background:#A3A3A3;
color:#FFFFFF;
}
.menuSelected
{
background:#CCCCCC;
color:#FFFFFF;
}
#subContent
{
clear:left;
min-height:400px;
height:400px;
border:1px solid #CCCCCC;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$("a.subMenu").click(function()
{
$("a.subMenu").removeClass("menuSelected");
$(this).addClass("menuSelected");
$("#subContent").load($(this).attr("href"));
return false;
});
});
</script>
</head>
<body>
<div id="subSystem">
<div id="subNav">
<a href="subPage1.html" class="subMenu menuSelected">First</a>
<a href="subPage2.html" class="subMenu">Second</a>
<a href="subPage3.html" class="subMenu">Third</a>
</div>
<div id="subContent">
Hello World!
</div>
</div>
</body>
</html>