// JavaScript Document
jQuery(document).ready(function() {	
		//Get all the LI from the #tabMenu UL
		jQuery('#tabMenuStd > li').click(function(){
		//remove the selected class from all LI    
		jQuery('#tabMenuStd > li').removeClass('selected');
		
		//Reassign the LI
		jQuery(this).addClass('selected');

		//Hide all the DIV in .boxBody02
		jQuery('.boxBody02 div').slideUp('1500');

		//Look for the right DIV in boxBody02 according to the Navigation UL index, therefore, the arrangement is very important.
		jQuery('.boxBody02 div:eq(' + jQuery('#tabMenuStd > li').index(this) + ')').slideDown('1500');

		}).mouseover(function() {

		//Add and remove class, Personally I dont think this is the right way to do it, anyone please suggest    
		jQuery(this).addClass('mouseover');
		jQuery(this).removeClass('mouseout');   

		}).mouseout(function() {

		//Add and remove class
		jQuery(this).addClass('mouseout');
		jQuery(this).removeClass('mouseover');    
	});
 
});