Uncle Jims Web Designs: Control Tabs

COPY - Insert Between Head Tags: <HEAD></HEAD>

.pane {
  display : none;
  }
td.tabs {
  border-top : medium outset #00ced1;
  border-left : medium outset #00ced1;
  border-bottom : medium outset #00ced1;
  border-right : medium outset #00ced1;

}
div.tabs {
  background-color : #00ffff;
  cursor : hand;
  }
</style>

<style type="text/css">
body {
  background-color : #e0ffff;
  }
input.txt {
  position : absolute;
  left : 120px;
  }
input.chk {
  position : relative;
  }
</style>

function tabstrip()
{
   this.tabs = new Array();
   this.add = addTab;
   this.write = writeTabstrip;
}

function tab(caption,content)
{
  this.setId = setId;
  this.caption = caption;
  this.content = content;
  this.write = writeTab;
  this.writeContent = writePane;
}

function addTab(tab)
{
  tab.setId("tab" + this.tabs.length);
  this.tabs[this.tabs.length] = tab;
}

function setId(id)
{
  this.id = id;
}

function initiate()
{
  var div = document.getElementById("tab0");
  showPane(div);
}

function showPane(div)
{
  if(currentTab != 0)
  {
    currentTab.style.backgroundColor = "#e0ffff";
  }
  div.style.backgroundColor = "#00ced1";
  currentTab = div;

if(currentPaneStyle != 0)
    currentPaneStyle.display = "none";
  var paneId = "pn_" + div.id;
  var objPaneStyle = document.getElementById(paneId).style;
  objPaneStyle.display = "block";
  currentPaneStyle = objPaneStyle;
}

function SubmitForm()
{
   window.alert("Form submitted.  This would normally take you to another page");
   // normally, you would here check the form and submit it.
   // if the form has the name 'tabform', then it is submitted
   // with tabform.submit();
}

function writePane()
{
  document.write("<div class='pane' id='pn_" + this.id + "'>" + this.content + "</div>");
}

function writeTab()
{
   document.write("<td class='tabs'><div class='tabs' id='" + this.id + "' onclick='showPane(this)'>" + this.caption + "</div></td>");
}

COPY - Insert Inside Body: <BODY></BODY>

Uncle Jim's Javascript Designs

JavaScript Tab Control