Here's a simple-minded demo, all in HTML. You just use ASP code to fill in the content of any of the tab-bodies as desired.
Code:
<HTML>
<HEAD>
<STYLE>
.thead { position: absolute;
height: 32; width: 100;
top: 80;
border-style: solid; border-color: black;
border-top-width: 1; border-left-width: 1; border-right-width: 1; border-bottom-width: 0;
background-color: lightyellow;
text-align: center;
z-index: 1;
}
.tbody { position: absolute;
height: 400; width: 500;
top: 110; left: 20;
border-style: solid; border-color: black;
border-width: 1;
background-color: wheat;
visibility: hidden;
text-align: center;
z-index: 2;
}
</STYLE>
</HEAD>
<BODY>
<DIV style="top: 30; height: 30; left: 20; width: 500;">
<CENTER>
<FORM Name="DummyForm">
<INPUT Type=Button Name="Left" Value="<<" DISABLED onClick="move(-1);">
<INPUT Type=Button Name="Right" Value=">>" onClick="move(1);">
</FORM>
</CENTER>
</DIV>
<DIV ID="TAB1" class="thead" style="left: 20; background-color: wheat; z-index: 3" onClick="show(1);">
First
</DIV>
<DIV ID="TAB2" class="thead" style="left: 120;" onClick="show(2);">
Second
</DIV>
<DIV ID="TAB3" class="thead" style="left: 220;" onClick="show(3);">
Third
</DIV>
<DIV ID="TAB4" class="thead" style="left: 320;" onClick="show(4);">
Fourth
</DIV>
<DIV ID="TAB5" class="thead" style="left: 420;" onClick="show(5);">
Fifth
</DIV>
<DIV ID="BODY1" class="tbody" style="visibility: visible;">
<P> <P><H1>1 1 1 1</H1>
</DIV>
<DIV ID="BODY2" class="tbody">
<P> <P><H1>22 22 22</H1>
</DIV>
<DIV ID="BODY3" class="tbody">
<P> <P><H1>333 333 333</H1>
</DIV>
<DIV ID="BODY4" class="tbody">
<P> <P><H1>4444 4444</H1>
</DIV>
<DIV ID="BODY5" class="tbody">
<P> <P><H1>55555555</H1>
</DIV>
<SCRIPT Language="JavaScript">
var current = 1;
function move( byWhat )
{
current += byWhat;
if ( current < 1 ) current = 1;
if ( current > 5 ) current = 5;
show( current );
}
function show( nwhich )
{
current = nwhich; // so that you can mix the two kinds of clicks
for ( var dnum = 1; dnum <= 5; ++dnum )
{
var dv = document.getElementById("BODY"+dnum);
dv.style.visibility = ( dnum == nwhich ? 'visible' : 'hidden' );
var tp = document.getElementById("TAB"+dnum);
tp.style.backgroundColor = ( dnum == nwhich ? 'wheat' : 'lightyellow' );
tp.style.zIndex = ( dnum == nwhich ? 3 : 1 );
}
document.DummyForm.Left.disabled = ( current == 1 );
document.DummyForm.Right.disabled = ( current == 5 );
}
</SCRIPT>
</BODY>
</HTML>
Tabs in classic ASP?
