<!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>
<style>
.tabs {
display: block;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script>
<script type="text/javascript">
$(function() {
$('#nav a').click(function() {
var index = $(this).index();
$('.panel').hide().eq(index).fadeIn();
return false;
})
})
</script>
<style>
.panel{ display:none}
.panel:first-child{ display:block}
</style>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div><a href="google.com" class="tabs">this is a test</a></div>
<br /><br />
<div id="nav">
<a href="#">Content 1</a>
<a href="#">Content 2</a>
<a href="#">Content 3</a>
</div>
<div id="content">
<div class="panel">Content 1 Text</div>
<div class="panel">Content 2 Text</div>
<div class="panel">Content 3 Text</div>
</div>
</body>
</html>