多表选项卡切换
来源：互联网 发布：无间道影评 知乎 编辑：程序博客网 时间：2024/04/28 04:23
例子1：
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script type="text/javascript" language="javascript">
function fnSelect(current,total)
{
for(i=1;i<=total;i++)
{
m=2*i-1;
n=2*i;
//被选中
if (i==current)
{
document.getElementById("div"+i).style.display="";
document.getElementById("td"+i).style.backgroundColor="Yellow";
document.getElementById("a"+i).style.color="Red";
}
//未被选中
else
{
document.getElementById("div"+i).style.display="none";
document.getElementById("td"+i).style.backgroundColor="Green";
document.getElementById("a"+i).style.color="Blue";
}
}
if(document.getElementById("div1")!= null)
{
if(current ==1)
{
document.getElementById("div1").style.display="";
}
else
{
document.getElementById("div1").style.display="none";
}
}
}
</script>
</head>
<body onload="fnSelect(1,3)">
<form id="form1" runat="server">
<div>
<table border="1" width="200" cellpadding="0" cellspacing="0">
<tr>
<td id="td1"><a id="a1" href="#" onclick="fnSelect(1,3)">div1</a></td>
<td id="td2"><a id="a2" href="#" onclick="fnSelect(2,3)">div2</a></td>
<td id="td3"><a id="a3" href="#" onclick="fnSelect(3,3)">div3</a></td>
</tr>
<tr>
<td colspan="3">
<div id="div1">
hello world! 111111111
</div>
<div id="div2">
hello world! 222222222
</div>
<div id="div3">
hello world! 333333333
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
例子2：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script type="text/javascript" language="javascript">
function changeTable(td1,td2,table1,table2)
{
document.getElementById(table1).style.display="block";
document.getElementById(table2).style.display="none";
document.getElementById(td1).background="WebCommon/Images/FrontPage/Index/RightBQBg_01.jpg";
document.getElementById(td1).className="rightBQFont_cu";
document.getElementById(td2).backgroud="";
document.getElementById(td2).className="rightBQFont_xi";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table border="0" cellpadding="0" cellspacing="0" width="202">
<tr>
<td align="left" class="rightBQLine" colspan="2" height="24">
<table border="0" cellpadding="0" cellspacing="0" height="24" style="cursor: pointer;">
<tr>
<td id="tdRentalLease" align="center" class="rightBQFont_cu" onclick='changeTable("tdRentalLease","tdRentalBeg","tbRentalLease","tbRentalBeg")'>
出租信息
</td>
<td align="center" width="1">
<img height="24" width="1" /></td>
<td id="tdRentalBeg" align="center" class="rightBQFont_xi" onclick='changeTable("tdRentalBeg","tdRentalLease","tbRentalBeg","tbRentalLease")'>
求租信息
</td>
<td width="1">
<img height="24" src="" width="1" /></td>
</tr></table>
</td>
</tr>
<tr>
<td align="left" class="adstyle" colspan="2">
<table id="tbRentalLease" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td colspan="2">
hello!!!!!!!!!!!
</td>
</tr>
<tr>
<td align="left" height="30" valign="bottom">
</td>
<td height="30" valign="bottom" align="right">
<span class="font_12_blue"><a class="font_12_blue" href="#" >更多</a></span></td>
</tr>
</table>
<table id="tbRentalBeg" border="0" cellpadding="0" cellspacing="0" style="display: none" width="100%">
<tr>
<td colspan="2">
world!!!!!!!!!!!
</td>
</tr>
<tr>
<td align="left" height="30" valign="bottom">
</td>
<td height="30" valign="bottom" align="right">
<span class="font_12_blue"><a class="font_12_blue" href="#" >更多</a></span></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
- 多表选项卡切换
- 一个选项卡切换
- javascript选项卡切换
- Jquery 选项卡切换
- 选项卡切换
- 选项卡切换
- 切换选项卡
- 选项卡切换
- jquery选项卡切换
- 选项卡切换
- js 选项卡切换
- 选项卡切换
- 选项卡切换
- Tab选项卡切换
- 选项卡 切换
- 选项卡切换效果
- jquery选项卡切换
- Tab选项卡切换
- 第二篇：svn服务器的基本配置
- php编码之mb_detect_encoding
- 终于把养老保险转移到新单位了
- 魔兽争霸英雄英语名称
- Configure form 6i and form services to work under XDB http listener of 10gEX
- 多表选项卡切换
- 这个世界上还有一个故事，叫做《大话西游》
- 自己写的小工具---JarCleaner
- 微软四大名著
- 设定窗体打开所处位置
- lua的数据结构
- 转：DM9000驱动解析
- ThoughtWorks求职记1.5
- 判断浏览器（整理）
