English
Sign in / Sign up

Tabination script

This javascript will help you for navigating menus. When you click on a specific menu its content gets displayed on the same page without reloading. The tabination links are automatically created for every request. This script is ideal for showing multi-page contents without reloading the rest of the page each time.

Features

  • By using this javascript, we can create navigation menus.
  • Supports the tabination of multiple menus on the same page.
  • Easy to customize.
  • Flexibility in rendering tabination links.
  • Just copy the code and use it into your page.

Preview

Menu 1 Menu 2 Menu 3
Catbirds produce a wide variety of sounds including cat-like barks.

Downloads

Javascript Code
<!-- Script by hscripts.com -->
<!-- More scripts @www.hscripts.com -->
<script type="text/javascript">
var arr=new Array('img1','img2','img3');
var arr1=new Array();
//set the number of menu
var cnt=3;
var tt;
Array.prototype.inArray = function (value)
{
// Returns true if the passed value is found in the
// array. Returns false if it is not.
var i;
for (i=0; i < this.length; i++)
{
if (this[i] == value)
{
return true;
}
}
return false;
};
function Show(Click_Menu)
{
tt=Click_Menu.id;
for(i=1;i<=cnt;i++)
{
var tmp="display"+i;
if(tmp==tt)
{
if(Click_Menu.style.display=="none")
{
Click_Menu.style.display="";
}
}
else
{
document.getElementById(tmp).style.display ="none";
}
}
}
function change_color(iid)
{
arr1.splice(0,arr1.length);
for(var i=0;i<=arr.length;i++)
{
if(arr[i]==iid) {
}
else
{
if(arr.inArray(arr[i]))
arr1.push(arr[i]);
}
}
document.getElementById(iid).style.backgroundColor="#008000";
for(var i=0;i<arr1.length;i++)
{
document.getElementById(arr1[i]).style.backgroundColor="#8AC452";
}
}
function disp()
{
document.getElementById('display1').style.display="";
document.getElementById('display2').style.display="none";
document.getElementById('display3').style.display="none";
}
function ctck()
{
var sds = document.getElementById("dum");
if(sds == null){alert("You are using a free package.\n You are not allowed to remove the tag.\n");}
var sdss = document.getElementById("dumdiv");
if(sdss == null){alert("You are using a free package.\n You are not allowed to remove the tag.\n");}
}
</script>
<!--Script by hscripts.com-->


HTML Code

<!-- Script by hscripts.com -->
<!-- More scripts @www.hscripts.com -->
<body onload='disp()'>
<table width=250 cellspacing=0 cellpadding=0><tr>
<td><a id="img1" href="javascript:Show(display1);javascript:change_color('img1');" style="background-color:#008000;text-decoration:none;color:white;border:1px solid navy;padding-left:10px;padding-right:9px;font-family:arial,verdana;font-size:12px;"> Menu 1</a>
<a id="img2" href="javascript:Show(display2);javascript:change_color('img2');" style="background-color:#8AC452;text-decoration:none;color:white;border:1px solid navy;padding-left:10px;padding-right:9px;font-family:arial,verdana;font-size:12px;">Menu 2 </a>
<a id="img3" href="javascript:Show(display3);javascript:change_color('img3');" style="background-color:#8AC452;text-decoration:none;color:white;border:1px solid navy;padding-left:10px;padding-right:9px;font-family:arial,verdana;font-size:12px;">Menu 3</a>
</td></tr>
<tr><td>
<span id="display1">
<table height=150 width=190 cellspacing=0 cellpadding=0 bgcolor="#FFFFCC" style="font-family:arial,verdana;font-size:13px;border:solid 1px navy;">
<tr><td>
<img src="htabination/images/catbird.gif"></td>
<td>Catbirds produce a wide variety of sounds including cat-like barks.</td>
</tr>
<tr><td colspan=2>
<div align=center style="font-size: 10px; color: #dadada;" id="dumdiv">
<a href="https://www.hscripts.com" id="dum" style="text-decoration:none; color: #dadada;">© hscripts.com</a>
</div>
</td>
</tr>
</table>
</span>
<span id="display2" style="display:none">
<table height=150 width=190 cellspacing=0 cellpadding=0 bgcolor="#FFFFCC" style="font-family:arial,verdana;font-size:13px;border:solid 1px navy;">
<tr><td>
<img src="htabination/images/loon.jpg"></td>
<td>The common loon is one of the earth's oldest living bird species.</td>
</tr>
<tr><td colspan=2>
<div align=center style="font-size: 10px; color: #dadada;" id="dumdiv">
<a href="https://www.hscripts.com" id="dum" style="text-decoration:none; color: #dadada;">© hscripts.com</a>
</div>
</td>
</tr>
</table>
</span>
<span id="display3" style="display:none">
<table height=150 width=190 cellspacing=0 cellpadding=0 bgcolor="#FFFFCC" style="font-family:arial,verdana;font-size:13px;border:solid 1px navy;">
<tr><td>
<img src="htabination/images/indigo.gif"></td>
<td>The Indigo Bunting communicates through vocalizations and visual cues.</td>
</tr>
<tr><td colspan=2>
<div align=center style="font-size: 10px; color: #dadada;" id="dumdiv">
<script language="javascript">document.onload = ctck();</script>
<a href="https://www.hscripts.com" id="dum" style="text-decoration:none; color: #dadada;">© hscripts.com</a>
</div>
</td>
</tr>
</table>
</span>
</td></tr>
</table>
<!--Script by hscripts.com-->
  • Release Date - 27-08-2008
  • Downloads : Version 1.0 -tabination.zip
  • Get free version without ©copyright link for just $10/-
  • For customization of this script or any script development, mail to support@hscripts.com

Usage

  • This script is used for tabination without refreshing and also for creating navigation menu.
  • Unzip the tabination.zip, extract the tabination.html file to execute.
  • Add any number of menus as you wish.
  • Set the count(cnt) value, which is equal to number of menus added.
  • Right click and save the images.
  • For example, If you add 5 menus then set the count value to 5.
    • <a href="javascript:Show(display4)">Menu4</a>
  • In Show() function pass the id of an span tag as an argument.
    • <span id="display4"> //Get the content </span>
  • The contents gets changed dynamically according to the navigation menu selection without refresh.

License

Related Scripts

Free Javascript Scripts


Ask Questions

Ask Question