如果一个网站的栏目或者子目录有很多，而且每个栏目或者子目录都是比较重要的内容，都需要在首页或者某个框架上展示，那么纵向切换式选项框（菜单）就再适合不过了，废话少说，下面就展示代码：
| <html> <head> <title>中国专业站长网——纵向切换式选项框（菜单）代码</title> <meta http-equiv="content-Type" content="text/html;charset=gb2312"> <!--把下面代码加到<head>与</head>之间--> <style type="text/css"> 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;} body{FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=darkblue,endColorStr=skyblue);} </style> </head> <body> <!--把下面代码加到<body>与</body>之间--> <script language="javascript"> var AroundInfoArray=new Array(); AroundInfoArray[0]="标签一的显示内容"; AroundInfoArray[1]="标签二的显示内容"; AroundInfoArray[2]="标签三的显示内容"; 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 width="84" valign="top"> <table cellpadding="0" cellspacing="0" border="0" height="407" width="84" id="leftButtonTAble"> <tr> <td height="25" align="center" class="DivAround_focus" onClick="ChangeFocus(this)">标签一</td> </tr> <tr> <td height="25" align="center" class="DivAround_blur" onClick="ChangeFocus(this)">标签二</td> </tr> <tr> <td height="25" align="center" class="DivAround_blur" onClick="ChangeFocus(this)">标签三</td> </tr> <tr> <td style="border-right:solid 1px #eeeeee"> </td> </tr> </table> </td> <td width="360"> <table cellpadding="0" cellspacing="0" border="0" width="100%" class="DivAround_content"> <tr> <td height="406" 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> |
将以上代码直接复制到HTML空白文件打开就可以看到效果，你可以根据自己爱好对选项框（菜单）的样式及颜色加以修改。