Skip to content

Instantly share code, notes, and snippets.

@deepak-rajpal

deepak-rajpal/Tabs-Using-JavaScript.html

Last active December 15, 2015 03:39
Show Gist options
  • Save deepak-rajpal/5195957 to your computer and use it in GitHub Desktop.
Save deepak-rajpal/5195957 to your computer and use it in GitHub Desktop.
Download ZIP
Tabs using javascript function, no need of jquery
Raw
Tabs-Using-JavaScript.html
<!-- Archived TutorialClass.com - http://tutorialsclass.com/articles/tools-technology/javascript-tabs-without-jquery -->
<html>
<head>
<script type="text/javascript">
function showtab(tabs)
{
/* alert("entered to function"); */
var tab=tabs;
switch(tab) //this switch case replaces the tabContent
{
case "tab-1":
document.getElementById('tab-container').innerHTML = document.getElementById("tab-1").innerHTML;
break;
case "tab-2":
document.getElementById('tab-container').innerHTML = document.getElementById("tab-2").innerHTML;
break;
case "tab-3":
document.getElementById('tab-container').innerHTML = document.getElementById("tab-3").innerHTML;
break;
case "tab-4":
document.getElementById('tab-container').innerHTML = document.getElementById("tab-4").innerHTML;
break;
default:
document.getElementById('tab-container').innerHTML = document.getElementById("tab-1").innerHTML;
break;
}
}
</script>
</head>
<body>
<!-- Home page tabs using javascript -->
<p>&nbsp;</p>
<table border="0" cellpadding="1" cellspacing="1">
<tbody>
<tr>
<td><a href="javascript:showtab('tab-1')"> MYGOALS </a>|</td>
<td><a href="javascript:showtab('tab-2')">EMS </a>|</td>
<td><a href="javascript:showtab('tab-3')">MYR </a>|</td>
<td><a href="javascript:showtab('tab-4')">PDP </a>|</td>
</tr>
</tbody>
</table>
<p id="tab-container"> Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue. </p>
<p id="tab-1" style="visibility:hidden"> Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue. </p>
<p id="tab-2" style="visibility:hidden"> auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper </p>
<p id="tab-3" style="visibility:hidden"> dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor </p>
<p id="tab-4" style="visibility:hidden"> dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor </p>
<!-- /Home page tabs using javascript -->
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment