一例纵向的TAB选项卡效果

< html >
< head >
< title > test </ title >
< style >
td,a,body {font-size:9pt;}
.DivAround_focus {cursor:pointer;background-color:#A1ACDB;border-right:solid 1px #A1ACDB;border-bottom:solid 1px #333333; border-left:solid 1px #C8CEEA;  border-top:solid 1px #C8CEEA;color:#000000}
.DivAround_blur {cursor:pointer;background:#4D5C9F;border-right:solid 1px #eeeeee;border-bottom:solid 1px #333333; border-left:solid 1px #798ACC;  border-top:solid 1px #A1ACDB;color:#FFFFFF}
.DivAround_content {background-color:#A1ACDB;border-right:solid 1px #888888;border-bottom:solid 1px #555555; border-left:0px; border-top:solid 1px #C8CEEA;}
</ style >
< meta http - equiv = " Content-Type "  c >
</ head >
< body bgcolor = " #FFFFFF "  leftmargin = " 0 "  topmargin = " 0 "  marginwidth = " 0 "  marginheight = " 0 " >
< script language = " javascript " >
var AroundInfoArray = new  Array();
AroundInfoArray[ 0 ] = " 七星彩 " ;
AroundInfoArray[ 1 ] = " 排列五 " ;
AroundInfoArray[ 2 ] = " 篮球彩 " ;
AroundInfoArray[ 3 ] = " 足球彩 " ;
function ChangeFocus(obj)
{
for(i=0;i<document.getElementById("leftButtonTAble").rows.length;i++)
{
if(document.getElementById("leftButtonTAble").rows[i].cells[0]==obj)
{
document.getElementById("leftButtonTAble").rows[i].cells[0].className="DivAround_focus";
document.getElementById("DivAroundContent").innerHTML=AroundInfoArray[i];
}else{
document.getElementById("leftButtonTAble").rows[i].cells[0].className="DivAround_blur";
}
}
}
</ script >
< table cellpadding = " 0 "  cellspacing = " 0 "  border = " 0 "  align = " center "  bgcolor = " #6271B1 " >
< tr >< td valign = " top " >
< table cellpadding = " 0 "  cellspacing = " 0 "  border = " 0 "  height = " 156 "  width = " 84 "  id = " leftButtonTAble " >
< tr >< td height = " 25 "  align = " center "   class = " DivAround_focus "   > 七星彩 </ td ></ tr >
< tr >< td height = " 25 "  align = " center "   class = " DivAround_blur "   > 排列五 </ td ></ tr >
< tr >< td height = " 25 "  align = " center "   class = " DivAround_blur "   > 篮球彩 </ td ></ tr >
< tr >< td height = " 25 "  align = " center "   class = " DivAround_blur "   > 足球彩 </ td ></ tr >
</ table >
</ td >< td >
< table width = " 303 "  height = " 157 "  border = " 0 "  cellpadding = " 0 "  cellspacing = " 0 "   class = " DivAround_content " >
< tr >< td valign = " top "  style = " padding:4px "  id = " DivAroundContent " > 内容 </ td >
</ tr >
</ table >
</ td ></ tr >
</ table >
< script language = " javascript " > ChangeFocus(document.getElementById( " leftButtonTAble " ).rows[ 0 ].cells[ 0 ]); </ script >
</ body ></ html >

转载于:https://www.cnblogs.com/DavidLc/archive/2008/02/14/1068979.html