简单实现选项卡例子

通常使用DIV+CSS+javascript实现选项卡,这里我用table+css+javascript,原理一样

其实复杂的DIV+CSS+js的应用都差不多,只要把简单的原理弄清楚了,在难的应用也不过如此

说正题:

背景:利用 table+CSS+Javascript实现选项卡功能

原理:利用 js操作控制Table的隐藏和呈现,以及js控制相关样式,实现更好的用户体验

步骤:

1。test.html页面(本文重点在弄清原理,所以例子相当简单)

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link type="text/css" rel="stylesheet" rev="stylesheet" href="test.css" />
<script src="test.js" type="text/javascript" language="javascript"></script>
</head>

<body>
<form action="" method="get">
<table width="200" border="1">
<tr>
<td id="td3" colspan="3" onclick="zhedie()">折叠</td>
</tr>
<tr>
<td onclick="change(0)" id="td1" class="tyes">区域A</td>
<td onclick="change(1)" id="td2">区域B</td>
</tr>
<tr>
<td colspan="2">
<table width="100%" border="1" id="table1">
<tr>
<td>aaaaa</td>
</tr>
<tr>
<td>aaaa</td>
</tr>
</table>
<table width="100%" border="1" id="table2" style="display:none">
<tr>
<td>bbbb</td>
</tr>
<tr>
<td>bbbb</td>
</tr>
</table>
</td>
</tr>
</table>

</form>
</body>
</html>

2.javascript代码 test.js文件


function change(n)
{
if(n==0)
{
table1.style.display="block";
td1.className="tyes";
table2.style.display="none";
td2.className="tno";
}
else
{
table2.style.display="block";
td2.className="tyes";
table1.style.display="none";
td1.className="tno";
}
}
function zhedie()
{
if(td1.style.display=="none")
{
td1.style.display="block";
td2.style.display="block";
table1.style.display="block";
table2.style.display="block";
}
else
{
td1.style.display="none";
td2.style.display="none";
table1.style.display="none";
table2.style.display="none";
}
}

3。css样式文件 test.css


function change(n)
{
if(n==0)
{
table1.style.display="block";
td1.className="tyes";
table2.style.display="none";
td2.className="tno";
}
else
{
table2.style.display="block";
td2.className="tyes";
table1.style.display="none";
td1.className="tno";
}
}
function zhedie()
{
if(td1.style.display=="none")
{
td1.style.display="block";
td2.style.display="block";
table1.style.display="block";
table2.style.display="block";
}
else
{
td1.style.display="none";
td2.style.display="none";
table1.style.display="none";
table2.style.display="none";
}
}

好了,就这么简单,实现了选项卡的功能,在复杂的应用也不过如此

你可能感兴趣的:(JavaScript,html,css,XHTML)