关于运用jQuery编写显示隐藏div的问题

我想做一个简单的显示divfunction，现在已经做出当你点击showdiv1就会显示div1,而且点击showdiv2,div2就会在相同的地方显示出来。现在我想做出... 我想做一个简单的显示div function，现在已经做出当你点击show div 1就会显示div1,而且点击show div 2, div2就会在相同的地方显示出来。现在我想做出当点击show div 1, div1的内容显示出来，再点击div1的内容，下面又有一个相应的div显示出来。当点击div2的显示内容，也有相应内容在相同的位置出来，以此类推。下面是源代码，请各位大侠忙帮，先谢谢了！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>show and hide try</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
function showDiv(n)
{
document.getElementById("div"+n).style.display = 'block'
return false;
}
function hideDiv(n)
{
for (x=1; x<=10; x++)
{
document.getElementById("div"+x).style.display = 'none'
}
document.getElementById(n).style.display = 'block'
return false;
}
function toggleDiv(id)
{
for (x=1; x<=3; x++)
{
document.getElementById("div"+x).style.display = 'none';
}
document.getElementById(id).style.display = 'block';
}
</script>
</head>
<body>
<table width="50%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="#" onClick="toggleDiv('div1');return false;">show div 1</a>
<a href="#" onClick="toggleDiv('div2');return false;">show div 2</a>
<a href="#" onClick="toggleDiv('div3');return false;">show div 3</a>
</td>
</tr>
</table>
<div id="div1" style="display: none; border:1px solid black;">
<table border=1 width=25% cellspacing="0" cellpadding="0">
<tr><td><a href="#" onClick="toggleDiv('graph1');return false;">this is div 1 contects</a></td></tr>
</table>
</div>
<div id="div2" style="display: none; border:1px solid black;">
<table border=1 width=25% cellspacing="0" cellpadding="0">
<tr><td><a href="#" onClick="toggleDiv('graph2');return false;">this is div 2 contects</a></td></tr>
</table>
</div>
<div id="div3" style="display: none; border:1px solid black;">
<table border=1 width=25% cellspacing="0" cellpadding="0">
<tr><td><a href="#" onClick="toggleDiv('graph3');return false;">this is div 3 contects</a></td></tr>
</table>
</div>
<div id="graph1" style="display: none; border:1px solid black;">graph1</div>
<div id="graph2" style="display: none; border:1px solid black;">graph2</div>
<div id="graph3" style="display: none; border:1px solid black;">graph3</div>
</body>
</html> 展开

 我来答

2个回答

#合辑# 机票是越早买越便宜吗？

yujianshenbing
2012-08-23 · TA获得超过281个赞

知道答主

回答量：89

采纳率：0%

帮助的人：144万

我也去答题访问个人页

关注

展开全部

代码稍作修改即可，主要用到show()和hide()方法，建议参考jQuery API文档：


<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script>
function showDiv(n) {
$("#div" + n).show();
return false;
}
function hideDiv(n) {
for( x = 1; x <= 10; x++) {
$("#div" + x).hide();
}
$('#' + n).show();
return false;
}
function toggleDiv(id) {
for( x = 1; x <= 3; x++) {
$("#div" + x).hide()
}
$('#'+ id).show();
}
</script>

已赞过 已踩过<

评论收起

百度网友387227639
2012-08-21 · TA获得超过143个赞

知道答主

回答量：85

采纳率：0%

帮助的人：76.9万

我也去答题访问个人页

关注

展开全部

两个函数：show和hide
用用试试吧！可以的。

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

关于运用jQuery编写 显示隐藏div的问题

为你推荐：

关于运用jQuery编写显示隐藏div的问题