<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0064)http://www.inquiry.com/techtips/web_...n1299/tabs.htm
-->
<HTML><HEAD>
<META content="text/html; charset=windows-1252" http-equiv=Content-Type>
<STYLE type=text/css>TD {
FONT: 8pt MS Sans Serif
}
</STYLE>

<SCRIPT id=clientEventHandlersJS language=javascript>

function window_onload()
{
// DEFINE WHICH TAB IS DISPLAYED FIRST
SetTabColors("Tab1")
}
</SCRIPT>

<!--<script>var _m1='<table width="100%" height="100%" border="0"><tr><td
align=center>'+_start+'</td></tr></table>';
var div1 = new NewDiv(window,"d1",_m1,10,10,500,50,10,true);
</script>-->
<META content="MSHTML 5.00.2614.3500" name=GENERATOR></HEAD>
<BODY bgColor=silver language=javascript onload="return window_onload()">
<CENTER>
<H1>DHTML Tabs</H1></CENTER><!-- The Tabs -->
<TABLE bgColor=silver border=0 cellPadding=0 cellSpacing=0
style="BACKGROUND: silver; HEIGHT: 30px; LEFT: 100px; OVERFLOW: hidden; POSITION:
absolute; TOP: 100px; WIDTH: 606px"
width="75%">
<TBODY>
<TR><!-- Space before Tab 1 -->
<TD align=middle style="FONT-SIZE: 10pt" width="1%">&nbsp; </TD><!--
Beginning of Tab 1 -->
<TD align=middle id=Tab1 onclick=SetTabColors(Tab1) style="FONT-SIZE:
10pt"
width="20%">Logs </TD><!-- Space between Tab 1 and Tab 2 -->
<TD align=middle style="FONT-SIZE: 10pt" width="1%">&nbsp; </TD><!--
Beginning of Tab 2 -->
<TD align=middle id= Tab2 onclick=SetTabColors(Tab2) style="FONT-SIZE:
10pt"
width="20%">Attachments</TD><!-- Remainder space after Tab 2 -->
<TD align=middle style="FONT-SIZE: 10pt" width="1%">&nbsp; </TD><!--
Beginning of Tab 3 -->
<TD align=middle id=Tab3 onclick=SetTabColors(Tab3) style="FONT-SIZE:
10pt"
width="20%">Links </TD><!-- Remainder space after Tab 2 -->
<TD bgColor=silver id=RemainderSpace>&nbsp; </TD></TR>
<TR>
<TD align=middle bgColor=#006699 colSpan=8>&nbsp; </TD></TR></TBODY></TABLE><!--
The Panels...put all of the controls to be displayed here -->
<TABLE border=0 cellPadding=1 cellSpacing=1 width="75%">
<TBODY>
<TR>
<TD vAlign=top><!-- Panel for tab 1 --><SPAN id=PanelForTab1
style="BACKGROUND: #006699; FONT-SIZE: 12pt; FONT-STYLE: normal; FONT-VARIANT:
normal; FONT-WEIGHT: normal; HEIGHT: 360px; LEFT: 100px; LINE-HEIGHT: normal;
OVERFLOW: hidden; POSITION: absolute; TOP: 130px; VISIBILITY: hidden; WIDTH:
606px">
<CENTER>
<H3>ISSUE LOG</H3></CENTER>
<CENTER>
<TABLE>
<TBODY>

</TBODY></TABLE></CENTER></SPAN><!-- Panel for tab 2 --><SPAN
id=PanelForTab2
style="BACKGROUND: #006699; HEIGHT: 360px; LEFT: 100px; OVERFLOW: hidden;
POSITION: absolute; TOP: 130px; VISIBILITY: hidden; WIDTH: 606px">
<CENTER>
<H1>tab2</H1></CENTER><SPAN id=InnerPanelForTab2
style="BACKGROUND: white; FONT-SIZE: 14pt; FONT-STYLE: normal; FONT-VARIANT:
normal; FONT-WEIGHT: normal; HEIGHT: 160px; LEFT: 200px; LINE-HEIGHT: normal;
OVERFLOW: scroll; POSITION: absolute; TOP: 50px; WIDTH: 150px">You
can even nest one SPAN within another.
<P>In this case we have done so to provide a finer degree of control
over
placement and display.
<P>You can even add additional control into this box.
<P>Click here if you understand:
<P>
<CENTER><INPUT id=ClickMe language=javascript name=ClickMe onclick="alert('Cool!')"
type=button value=OK>
</CENTER>
<P>&nbsp; </SPAN></SPAN></P></TD></TR></TBODY></TABLE><!-- Panel for
tab 2 --><SPAN id=PanelForTab3
style="BACKGROUND: #006699; FONT-SIZE: 12pt; FONT-STYLE: normal; FONT-VARIANT:
normal; FONT-WEIGHT: normal; HEIGHT: 360px; LEFT: 100px; LINE-HEIGHT: normal;
OVERFLOW: hidden; POSITION: absolute; TOP: 130px; VISIBILITY: hidden; WIDTH:
606px">
<CENTER>
<H1>tab1</H1></CENTER>
<BLOCKQUOTE>Panels are defined by SPAN tags. Add your own HTML to the
inside of the SPAN tags and it will be shown and hidden appropriately.
We have some sample HTML controls here. </BLOCKQUOTE>
<CENTER>
<TABLE>
<TBODY>
<TR>
<TD>Please Send Me Updates</TD>
<TD><INPUT id=checkbox1 name=checkbox1 type=checkbox></TD></TR>
<TR>
<TD>Name</TD>
<TD><INPUT id=text1 name=text1></TD></TR>
<TR>
<TD>Email Address</TD>
<TD><INPUT id=text2 name=text2></TD></TR></TBODY></TABLE></CENTER></SPAN>

<SCRIPT>

function SetTabColors(TheSelectedTab)
{
var TabBorderStyle="outset"
var TabBorderColor="gray"
var TabBorderWidth=3

var UNSELECTED_COLOR = '#ffffee'
var SELECTED_COLOR = '#006699'

var ITab = Tab1.style
var PTab = Tab2.style
var TTab = Tab3.style

// RESET ALL TABS TO A DEFAULT STYLE
Tab1.bgColor=UNSELECTED_COLOR
Tab1.style.fontWeight=400
Tab1.style.color = "black"

Tab2.bgColor=UNSELECTED_COLOR
Tab2.style.fontWeight=400
Tab2.style.color = "black"

Tab3.bgColor=UNSELECTED_COLOR
Tab3.style.fontWeight=400
Tab3.style.color = "black"

// CHANGE THE SELECTED TAB
//TheSelectedTab.style.color = "white"
TheSelectedTab.bgColor = SELECTED_COLOR
TheSelectedTab.style.fontWeight=700

switch(TheSelectedTab)
{
case Tab1:
// SET MOUSE CURSOR LOOK
ITab.cursor="default"
PTab.cursor="hand"
TTab.cursor="hand"
// SET THE PANELS TO BE HIDDEN OR DISPLAYED
PanelForTab1.style.visibility="visible"
PanelForTab2.style.visibility="hidden"
PanelForTab3.style.visibility="hidden"
// SET TAB LOOK
ITab.borderRightStyle=ITab.borderLeftStyle=ITab.borderTopStyle=""
ITab.borderRightColor=ITab.borderLeftColor=ITab.borderTopColor=""
ITab.borderRightWidth=ITab.borderLeftWidth=ITab.borderTopWidth=0

PTab.borderRightStyle=PTab.borderLeftStyle=PTab.borderTopStyle=TabBorderStyle
PTab.borderRightColor=PTab.borderLeftColor=PTab.borderTopColor=TabBorderColor
PTab.borderRightWidth=PTab.borderLeftWidth=PTab.borderTopWidth=TabBorderWidth

TTab.borderRightStyle=TTab.borderLeftStyle=TTab.borderTopStyle=TabBorderStyle
TTab.borderRightColor=TTab.borderLeftColor=TTab.borderTopColor=TabBorderColor
TTab.borderRightWidth=TTab.borderLeftWidth=TTab.borderTopWidth=TabBorderWidth

break;

case Tab2:
// SET MOUSE CURSOR LOOK
ITab.cursor="hand"
PTab.cursor="default"
TTab.cursor="hand"
// SET THE PANELS TO BE HIDDEN OR DISPLAYED
PanelForTab1.style.visibility="hidden"
PanelForTab2.style.visibility="visible"
PanelForTab3.style.visibility="hidden"
// SET TAB LOOK
PTab.borderRightStyle=PTab.borderLeftStyle=PTab.borderTopStyle=""
PTab.borderRightColor=PTab.borderLeftColor=PTab.borderTopColor=""
PTab.borderRightWidth=PTab.borderLeftWidth=PTab.borderTopWidth=0

ITab.borderRightStyle=ITab.borderLeftStyle=ITab.borderTopStyle=TabBorderStyle
ITab.borderRightColor=ITab.borderLeftColor=ITab.borderTopColor=TabBorderColor
ITab.borderRightWidth=ITab.borderLeftWidth=ITab.borderTopWidth=TabBorderWidth

TTab.borderRightStyle=TTab.borderLeftStyle=TTab.borderTopStyle=TabBorderStyle
TTab.borderRightColor=TTab.borderLeftColor=TTab.borderTopColor=TabBorderColor
TTab.borderRightWidth=TTab.borderLeftWidth=TTab.borderTopWidth=TabBorderWidth

break;


case Tab3:
// SET MOUSE CURSOR LOOK
ITab.cursor="hand"
PTab.cursor="hand"
TTab.cursor="default"

// SET THE PANELS TO BE HIDDEN OR DISPLAYED
PanelForTab1.style.visibility="hidden"
PanelForTab2.style.visibility="hidden"
PanelForTab3.style.visibility="visible"
// SET TAB LOOK
TTab.borderRightStyle=PTab.borderLeftStyle=TTab.borderTopStyle=""
TTab.borderRightColor=PTab.borderLeftColor=TTab.borderTopColor=""
TTab.borderRightWidth=PTab.borderLeftWidth=TTab.borderTopWidth=0

ITab.borderRightStyle=ITab.borderLeftStyle=ITab.borderTopStyle=TabBorderStyle
ITab.borderRightColor=ITab.borderLeftColor=ITab.borderTopColor=TabBorderColor
ITab.borderRightWidth=ITab.borderLeftWidth=ITab.borderTopWidth=TabBorderWidth

PTab.borderRightStyle=ITab.borderLeftStyle=PTab.borderTopStyle=TabBorderStyle
PTab.borderRightColor=ITab.borderLeftColor=PTab.borderTopColor=TabBorderColor
PTab.borderRightWidth=ITab.borderLeftWidth=PTab.borderTopWidth=TabBorderWidth

break;
}
}

</SCRIPT>
</BODY></HTML>