deepak-rajpal
3/19/2013 - 1:19 PM

Jquery Tabs using <td> as Tabs.

Jquery Tabs using as Tabs.

Tabs-Using-Jquery.html
content_copyfile_download
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Tabs</title>
<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 p').hide();
	$('#tabs p:first').show();
	$('#tabs table td:first').addClass('active');
	$('#tabs table td a').click(function(){ 
		$('#tabs table td').removeClass('active');
		$(this).parent().addClass('active'); 
		var currentTab = $(this).attr('href'); 
		$('#tabs p').hide();
		$(currentTab).show();
		return false;
		});
	});
</script>
</head>
<body>
  <div id="tabs">
    <table border="0" cellpadding="1" cellspacing="1">	
		<tr>
			<td><a href="#tab-1">MYGOALS </a>|</td>
			<td><a href="#tab-2">EMS </a>|</td>
			<td><a href="#tab-3">MYR </a>|</td>
			<td><a href="#tab-4">PDP </a>|</td>
		</tr>	
	</table>
      <p id="tab-1"> GE's My Goals helps you align your performance goals to our overall business strategy. It's where you outline your goals and the growth Values behaviors you will emulate to accomplish your goals. It's also where you determine the measures to determine success. </p>        
      <p id="tab-2"> It's where you outline your goals and the growth Values behaviors you will emulate to accomplish your goals. </p>
      <p id="tab-3"> It's also where you determine the measures to determine success. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur enim. </p>  
      <p id="tab-4"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur enim. </p>
  </div>
</body>
</html>