<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>标签卡主页面</title> <META http-equiv="Content-Type" content="text/html; charset=gb2312"> <script language="JavaScript"> <!-- //切换标签函数 function clickTab(num){ //获得标签对象 var tab1 = document.getElementById("tab1"); var tab2 = document.getElementById("tab2"); var tab3 = document.getElementById("tab3"); //获得需要控制的内容区域对象 var tabarea1 = document.getElementById("tabarea1"); var tabarea2 = document.getElementById("tabarea2"); var tabarea3 = document.getElementById("tabarea3"); //根据标签的序号执行不同内容 switch( num ){ case 1: //设置背景色 tab1.bgColor = "ff0000"; tab2.bgColor = ""; tab3.bgColor = ""; //设置可见性 tabarea1.style.display = "block"; tabarea2.style.display = "none"; tabarea3.style.display = "none"; break; case 2: //设置背景色 tab1.bgColor = ""; tab2.bgColor = "ff0000"; tab3.bgColor = ""; //设置可见性 tabarea1.style.display = "none"; tabarea2.style.display = "block"; tabarea3.style.display = "none"; break; case 3: //设置背景色 tab1.bgColor = ""; tab2.bgColor = ""; tab3.bgColor = "ff0000"; //设置可见性 tabarea1.style.display = "none"; tabarea2.style.display = "none"; tabarea3.style.display = "block"; break; } } //--> </script> </head> <body> <table border="1"> <tr> <td id="tab1" bgcolor="#ff0000" onclick="clickTab(1)">标签卡1</td> <td id="tab2" onclick="clickTab(2)">访问yahoo</td> <td id="tab3" onclick="clickTab(3)">标签卡3</td> </tr> </table> <table width="400" border="1" height="300"> <tr id="tabarea1" style="display:block;"> <td>标签卡1需要显示的内容</td> </tr> <tr id="tabarea2" style="display:none;"> <td><iframe width="100%" height="100%" src="http://www.yahoo.com.cn"></iframe></td> </tr> <tr id="tabarea3" style="display:none;"> <td>标签卡3需要显示的内容</td> </tr> </table> </body> </html>