Create a jquery tab

Create a jquery tab
A tutorial how to create a tab manipulated using jQuery







The Code

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#tabs div').hide();
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div').hide();
$(currentTab).show();
return false;
});
});
</script>
<style type="text/css">

.solidblockmenu{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
overflow: hidden;
margin-bottom: 1em;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(images/blockdefault.gif) center center repeat-x;
}
.solidblockmenu li{
display: inline;
}
.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}
.solidblockmenu li a:visited{
color: white;
}
#tabs ul li.active a {
color: white;
background: transparent url(images/blockactive.gif) center center repeat-x;
}
#container {
width:40%;
background: #494949;
color:#FFFFFF;
}
#container p{
padding:15px;
}
#container h3{
padding:15px;
}
</style>
<div id="container">
<div id="tabs">
<ul class="solidblockmenu">
<li><a href="#tab-1">This is Tab 1</a></li>
 <li><a href="#tab-2">Tab Two</a></li>
 <li><a href="#tab-3">Tab Three</a></li>
 <li><a href="#tab-4">Tab Four</a></li>
</ul>

<div id="tab-1">
 <h3>This is a really simple tabbed interface</h3>
 <p>Lorem ipsum dolor vitae quam. Vivamus ut odio.
Pellentesque mollis arcu nec metus. Nullam bibendum scelerisque turpis. Aliquam erat volutpat. <br/>
 </p>
</div>
<div id="tab-2">
 <h3>Tab 2</h3>
<p>Lorem ipsum dolor vitae quam. Vivamus ut odio.
Pellentesque mollis arcu nec metus. Nullam bibendum scelerisque turpis. Aliquam erat volutpat. <br/>
</p>
</div>
<div id="tab-3">
 <h3>Tab 3</h3>
<p>Lorem ipsum dolor vitae quam. Vivamus ut odio.
Pellentesque mollis arcu nec metus. Nullam bibendum scelerisque turpis. Aliquam erat volutpat. <br/>
</p>
</div>
<div id="tab-4">
 <h3>Tab 4</h3>
<p>Lorem ipsum dolor vitae quam. Vivamus ut odio.
Pellentesque mollis arcu nec metus. Nullam bibendum scelerisque turpis. Aliquam erat volutpat. <br/>
</p>
</div>

</div>
</div>

Download

http://dl.dropbox.com/u/7106563/r-ednalan/jquerytab.zip