制作Tab的两个例子［html+javascript］
来源：互联网 发布：安卓软件编程工具 编辑：程序博客网 时间：2024/05/21 19:43
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>制作Tab的两个例子［html+javascript］</title>
<link type="text/css" href="styleSheet.css" rel="stylesheet" />
<script language="javascript">
void function act(num){
if (num ==1) {
document.getElementById("bt1").className= 'selectBT';
document.getElementById("bt2").className='noSelectBT';
document.getElementById("ifrm").src='TabChild1.htm';
}
if (num ==2) {
document.getElementById("bt1").className= 'noSelectBT';
document.getElementById("bt2").className='selectBT';
document.getElementById("ifrm").src='TabChild2.htm';
}
}
void function evtHander(num){
if (num ==1) {
document.getElementById("td1").className= 'selectTD';
document.getElementById("td2").className='noSelectTD';
//动态隐藏
document.getElementById("div1").style.display = 'inline';
document.getElementById("div2").style.display = 'none';
//静态隐藏
//document.getElementById("div1").style.visibility = 'visible';
//document.getElementById("div2").style.visibility = 'hidden';
}
if (num ==2) {
document.getElementById("td1").className= 'noSelectTD';
document.getElementById("td2").className='selectTD';
//动态隐藏
document.getElementById("div1").style.display = 'none';
document.getElementById("div2").style.display = 'inline';
//静态隐藏
//document.getElementById("div1").style.visibility = 'hidden';
//document.getElementById("div2").style.visibility = 'visible';
}
}
</script>
</head>
<body onload="javascript:act(2);evtHander(2)">
<!-->///////////////////////////////第一个例子////////////////////////////////<-->
<table width="200" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
</td>
<td>
<input type="button" id="bt1" name="nmbt1" class="selectBT" onclick="javascript:act(1)"
value="Tab1" /> <input type="button" id="bt2" class="noSelectBT" onclick="javascript:act(2)"
value="Tab2" /></td>
</tr>
<tr>
<td colspan="2">
<iframe id="ifrm" height="160" style="border-top: maroon 2px solid; border-right: maroon 2px solid;
border-left: maroon 2px solid; border-bottom: maroon 2px solid;" src="Img.htm"
frameborder="0"></iframe>
</td>
</tr>
</table>
<br />
<br />
<!-->///////////////////////////////第二个例子////////////////////////////////<-->
<br />
<table cellspacing="0" cellpadding="0" align="center" width="400" height="160">
<tr height="17">
<td style="border-bottom: silver 2px solid;" width="10%">
</td>
<td style="border-bottom: green 2px solid;" width="10%">
</td>
<td align="center" id="td1" width="30%" class="selectTD" onmouseenter="javascript:evtHander(1)">
Tab1</td>
<td width="30%" align="center" id="td2" class="noSelectTD" onmouseenter="javascript:evtHander(2)">
Tab2</td>
<td style="border-bottom: green 2px solid;">
</td>
<td style="border-bottom: silver 2px solid;" width="10%">
</td>
</tr>
<tr>
<td style="border-right: green 2px solid;"> </td>
<td colspan="4" style="border-bottom: green 2px solid;">
<div id="div1">
<ul>
<li><a href="http://www.baidu.com">百度</a></li>
<li><a href="http://www.baidu.com">百度</a></li>
<li><a href="http://www.baidu.com">百度</a></li>
<li><a href="http://www.baidu.com">百度</a></li>
</ul>
</div>
<div id="div2">
<ul>
<li><a href="http://www.baidu.com">百度中文</a></li>
<li><a href="http://www.baidu.com">百度中文</a></li>
<li><a href="http://www.baidu.com">百度中文</a></li>
<li><a href="http://www.baidu.com">百度中文</a></li>
</ul>
</div>
</td>
<td style="border-left: green 2px solid;"> </td>
</tr>
</table>
</body>
</html>
//<!-- css 样式文件StyleSheet.css -->
.selectBT
{
border-right: maroon 2px outset;
border-top: maroon 2px outset;
font-weight: bold;
border-left: maroon 2px outset;
color: #ffffff;
border-bottom: maroon 2px outset;
background-color: maroon;
}
.noSelectBT
{
font-weight: normal;
color: windowtext;
background-color: papayawhip;
border-right: 1px solid;
border-top: 1px solid;
border-left: 1px solid;
border-bottom: 1px solid;
}
.selectTD
{
border-right: green 2px solid;
border-top: green 2px solid;
font-weight: bold;
vertical-align: middle;
border-left: green 2px solid;
text-align: center;
}
.noSelectTD
{
border-right: silver 1px solid;
border-top: silver 1px solid;
border-left: silver 1px solid;
font-weight: normal;
border-bottom: green 2px solid;
background-color: lavender;
}
- 制作Tab的两个例子［html+javascript］
- 在使用jQuery+HTML+Javascript的简单例子---很容易的制作双色表格
- css tab的制作
- 简单Tab的制作
- HTML中tab选项卡制作
- JavaScript HTML 小例子
- html 的tab页
- Java io导出html制作的excle报表例子
- JavaScript实现的tab
- javascript的tab标签
- 简单tab面板的制作
- 两个列表匡内容互相挪来挪去的例子(javascript)
- html+javascript+css简单例子
- 用Javascript和HTML制作的数值调节器
- 使用html与javascript制作简单的网页时钟
- 用javascript制作一个简单的html编辑器
- JS（javascript） 控制HTML 元素的好例子
- JavaScript的type属性等于text/html 例子
- HTTP Response Headers
- 今天开张
- 如何在客户器端判断上传文件的大小
- 网络创业成功之路(转载自网上,原文出处不详)
- C标准中的一些新术语
- 制作Tab的两个例子［html+javascript］
- 25条哈佛成功金言
- Java & .net之间的桥
- JBoss与IIS服务器集成
- 南方周末：两位大学生的互联网创业梦(转载)
- 中国职员的九种劣根性【转】
- 安全性对比：有路由器还需防火墙
- 北方饺子
- VC读书笔记
