TabContrl

最新推荐文章于 2021-06-10 14:12:03 发布

weixin_34414650

最新推荐文章于 2021-06-10 14:12:03 发布

阅读量106

点赞数

文章标签： javascript ViewUI

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