<div class="boxBody">
<div id="page_home" class="page show">
<div id="slider" class="show">
<h1>Put some stuff here for the home page</h1>
</div>
</div>
<div id="page_galleries" class="page">
<h1>This is where we put the stuff for the Galleries page!</h1>
</div>
<div id="page_services" class="page">
<h1>This is where we put the stuff for the Services page!</h1>
</div>
<div id="page_about" class="page">
<div id="aboutContent">
<div id="aboutContentImg">
<p>Put an image here</p>
</div>
<div id="aboutContentTxt">
<h1>This is where we put the stuff for the About page!</h1>
</div>
</div>
<div id="aboutImg">
<h2>This is some image</h2>
</div>
</div>
<div id="page_proofs" class="page">
<h1>This is where we put the stuff for the Proofs page!</h1>
</div>
<div id="page_contact" class="page">
<h1>This is where we put the stuff for the Contact page!</h1>
</div>
</div>
$(document).ready(function() {
//Get all the LI from the #tabMenu UL
$('#tabMenu > li').click(function(){
//remove the selected class from all LI
$('#tabMenu > li').removeClass('selected');
//Reassign the LI
$(this).addClass('selected');
//Hide all the DIV in .boxBody
$('.boxBody div.page').slideUp('1500');
//Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important.
$('.boxBody > div:eq(' + $('#tabMenu > li').index(this) + ')').contents().andSelf().slideDown('1500');
}).mouseover(function() {
//Add and remove class, Personally I dont think this is the right way to do it, anyone please suggest
$(this).addClass('mouseover');
$(this).removeClass('mouseout');
}).mouseout(function() {
//Add and remove class
$(this).addClass('mouseout');
$(this).removeClass('mouseover');
});
});