制作网页时内容的显示和隐藏的代码

在有些网页中有“+”按一下就显示，在按一下就隐藏，这是怎么做到的... 在有些网页中有“+”按一下就显示，在按一下就隐藏，这是怎么做到的展开

 我来答

2个回答

#热议# 为什么有人显老，有人显年轻？

599500
2009-12-14

知道答主

回答量：17

采纳率：0%

帮助的人：0

我也去答题访问个人页

关注

展开全部

好好回答一下，以下代码实现你所说的效果，演示之用：
代码是在网上转的，我作了一点注释，下面代码保存为.html可以看到效果。
<html>
<head>
<title></title>
<script type="text/javascript">
function show(){
 if(document.getElementById("table_foot").style.display=="block")
 {//如果id为table_foot的标签style.diplay属性为block，则执行：
  document.getElementById("table_foot").style.display="none";
  }else{
  document.getElementById("table_foot").style.display="block";
 }
}
</script>
</head>
<body>
<table border="1" width="100%">
<tr id="table_head" onclick="show()" style="cursor:pointer;">
<td align="center">点击这里显示内容</td>
</tr>
<tr id="table_foot" style="display:none;"><!--看这里ID值在这儿。 -->
<td height="300" align="center" valign="middle" >你看到我没啊？哈！圣诞快乐！</td>
</tr>
</table>
</body>
</html>


本回答被提问者采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

世泳裂古来6G
2015-10-30 · TA获得超过265个赞

知道答主

回答量：92

采纳率：25%

帮助的人：22万

我也去答题访问个人页

关注

展开全部

v的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白

Js代码
style="visibility: none;"

document.getElementById("typediv1").style.visibility="hidden";//隐藏

document.getElementById("typediv1").style.visibility="visible";//显示

通过设置display属性可以使div隐藏后释放占用的页面空间如下

Js代码
style="display: none;"

document.getElementById("typediv1").style.display="none";//隐藏

document.getElementById("typediv1").style.display="";//显示

此JS代码中，没有用try——Catch捕获错误，代码如下：

Js代码
<script language="javascript">
//创建一个showhidediv的方法，直接跟ID属性
function showhidediv(id){
var sbtitle=document.getElementById(id);
if(sbtitle){
if(sbtitle.style.display=='block'){
sbtitle.style.display='none';
}else{
sbtitle.style.display='block';
}
}
}
</script>

<div id="show" onMouseMove='showhidediv("msg")';>鼠标移动这里</div>
<div id="msg" style="display:none;">出现显示的内容</div> 

onMouseMove='showhidediv("msg")'; 这里是鼠标动作，可以替换成Click或其他！

做两个层之间的切换：

Js代码
<script language="javascript">
//创建一个showhidediv的方法，直接跟ID属性
function showhidediv(id){
var age=document.getElementById("msg_2");
var name=document.getElementById("msg_1");
if (id == 'name') {
if (name.style.display=='none') {
age.style.display='none';
name.style.display='block';
}
} else {
if (age.style.display=='none') {
name.style.display='none';
age.style.display='block';
}
}
}
</script>
<div id="show" style="float:left;" onMouseMove='showhidediv("name")';>Name：</div><div id="show" style="float:left;" onMouseMove='showhidediv("age")';>Age：</div>
<div id="msg_1" style="display:none;float:left;">林雨林</div>
<div id="msg_2" style="display:none;float:left;">18</div>

已赞过 已踩过<

评论收起

1条折叠回答

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

您可能关注的内容

ai logo在线出图-M·J在线绘画生成器-中文入口

chatyy.jhdbwl.cn

制作网页时 内容的显示和隐藏的代码

您可能关注的内容

其他类似问题

为你推荐：

制作网页时内容的显示和隐藏的代码