用javascript怎么隐藏和现实整个表格？
我想用js来轮流显示和隐藏六张表格，但是写好js函数就是没反应，具体要求就是：点击首页，电梯配置，故障预测。。。等等这些<a>时候调用func（）函数，使得这六张表格只显...
我想用js来轮流显示和隐藏六张表格，但是写好js函数就是没反应，具体要求就是：点击首页，电梯配置，故障预测。。。等等这些<a>时候调用func（）函数，使得这六张表格只显示对应的一张，其他的表格隐藏，但是做不到，代码如下，请教大神过目：
<div>
<!--navigation_bar-->
<div>
<ul>
<li><a id="l0" href="javascript:void(0)" onClick="func(0)">首页</a></li>
<li><a id="l1" href="javascript:void(0)" onClick="func(1)">电梯配件</a></li>
<li><a id="l2" href="javascript:void(0)" onClick="func(2)">故障预测</a></li>
<li><a id="l3" href="javascript:void(0)" onClick="func(3)">整梯装配</a></li>
<li><a id="l4" href="javascript:void(0)" onClick="func(4)">电梯保养</a></li>
<li><a id="l5" href="javascript:void(0)" onClick="func(5)">我的电梯</a></li>
</ul>
</div>
<script type="text/javascript">
func(num)
{
if(document.getElementById(num).style.display=="none")
{
for(var i=0;i<=5;i++)
document.getElementById(i).style.display="none";
document.getElementById(num).style.display="block";
}
}
</script>
<br/>
<br/>
<!--首页-->
<table border="1" id="0" style="display:none; position:relative; top:30px">
<tr>
<th>0000</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<!--电梯配件-->
<table border="1" id="1" style="display:block; position:relative; top:30px">
<tr>
<th>1111</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<!--故障预测-->
<table border="1" id="2" style="display:block; position:relative; top:30px">
<tr>
<th>2222</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<!--整梯装配-->
<table border="1" id="3" style="display:block; position:relative; top:30px">
<tr>
<th>3333</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<!--电梯保养-->
<table border="1" id="4" style="display:block; position:relative; top:30px">
<tr>
<th>4444</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
</table>
<!--我的电梯-->
<table border="1" id="5" style="display:block; position:relative; top:30px">
<tr>
<th>5555</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table> 展开
<div>
<!--navigation_bar-->
<div>
<ul>
<li><a id="l0" href="javascript:void(0)" onClick="func(0)">首页</a></li>
<li><a id="l1" href="javascript:void(0)" onClick="func(1)">电梯配件</a></li>
<li><a id="l2" href="javascript:void(0)" onClick="func(2)">故障预测</a></li>
<li><a id="l3" href="javascript:void(0)" onClick="func(3)">整梯装配</a></li>
<li><a id="l4" href="javascript:void(0)" onClick="func(4)">电梯保养</a></li>
<li><a id="l5" href="javascript:void(0)" onClick="func(5)">我的电梯</a></li>
</ul>
</div>
<script type="text/javascript">
func(num)
{
if(document.getElementById(num).style.display=="none")
{
for(var i=0;i<=5;i++)
document.getElementById(i).style.display="none";
document.getElementById(num).style.display="block";
}
}
</script>
<br/>
<br/>
<!--首页-->
<table border="1" id="0" style="display:none; position:relative; top:30px">
<tr>
<th>0000</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<!--电梯配件-->
<table border="1" id="1" style="display:block; position:relative; top:30px">
<tr>
<th>1111</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<!--故障预测-->
<table border="1" id="2" style="display:block; position:relative; top:30px">
<tr>
<th>2222</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<!--整梯装配-->
<table border="1" id="3" style="display:block; position:relative; top:30px">
<tr>
<th>3333</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<!--电梯保养-->
<table border="1" id="4" style="display:block; position:relative; top:30px">
<tr>
<th>4444</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
</table>
<!--我的电梯-->
<table border="1" id="5" style="display:block; position:relative; top:30px">
<tr>
<th>5555</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table> 展开
1个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS 演示代码</title>
<style>
* {
margin: 0;
padding: 0;
}
table {
border: 1px solid black;
border-collapse: collapse;
display: none;
position: relative;
top: 30px;
}
th,td {
border: 1px solid black;
}
</style>
<script type="text/javascript">
var ind = -1;
onload = function() {
var tables = document.getElementsByTagName("table");
tables[0].style.display = 'block';
ind = 0;
var as = document.getElementsByTagName("a");
for (var i = 0; i < as.length; i++) {
as[i].index = i;
as[i].onclick = function() {
tables[ind].style.display = 'none';
tables[this.index].style.display = 'block';
ind = this.index;
}
}
}
</script>
</head>
<body>
<div>
<!--navigation_bar-->
<div>
<ul>
<li><a href="###">首页</a>
</li>
<li><a href="###">电梯配件</a>
</li>
<li><a href="###">故障预测</a>
</li>
<li><a href="###">整梯装配</a>
</li>
<li><a href="###">电梯保养</a>
</li>
<li><a href="###">我的电梯</a>
</li>
</ul>
</div>
<!--首页-->
<table>
<tr>
<th>0000</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<!--电梯配件-->
<table>
<tr>
<th>1111</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<!--故障预测-->
<table>
<tr>
<th>2222</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<!--整梯装配-->
<table>
<tr>
<th>3333</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<!--电梯保养-->
<table>
<tr>
<th>4444</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
</table>
<!--我的电梯-->
<table>
<tr>
<th>5555</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
</div>
</body>
</html>
追问
感谢您回答！请问我的getelementbyid为什么不行呢？您能帮我稍稍解释一下您的代码吗？我初学不太明白感激不尽！
追答
要解释的太多了，都在附件里，我从菜鸟到知道只花了一个礼拜的时间，网上也有下载，如果你有的话，就多看看啊，没有就下载啊
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
