<!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>
