Created
March 19, 2013 13:19
-
-
Save deepak-rajpal/5196039 to your computer and use it in GitHub Desktop.
Jquery Tabs using <td> as Tabs.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment