js 显示隐藏div简单效果
  • 内容
  • 评论
  • 相关

在做网站总后台项目的时候,需要做一个简单的 js隐藏DIV的效果,也就是说有一项内容,点击文字之后才会出现,然后将原来点击的文字隐藏掉,当然,跟原来项目经理说的有一点出入,遂从网上找了一个差不多的效果,自己修改了一下,就这样应用到站点中去了,很简单,也很容易的一个简单的 JS 效果,当然,网上也有许多的 jquery 可以实现同样的效果,看个人习惯了,在这里就把原来的所有代码分享一下了,实例代码如下:

无标题文档

单击此处添加描述


<html>    
<head>    
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />    
<title>无标题文档</title>    
<script language="JavaScript" type="text/JavaScript">    
<!--    
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>    
</script>    
</head>    
<body>    
<div id="msg_1" style="display:block;float:left;" onclick='showhidediv("age")';>    
<p id="photoTitle" >单击此处添加描述</p></div>    
<div id="msg_2" style="display:none;float:left;" >    
<form id="">    
<textarea class="textarea" id="" name=""></textarea>    
<div class="">    
<input type="button" value="保存" class="" id="">    
<input type="button" value="取消" class="" id="" onclick='showhidediv("name")';>    
</div>    
<input type="hidden" name="" value=""></form>    
<!-- suppore.cn -->  
</div>    
</body>    
</html>  
点赞
X
赞助一下:
    支付宝    微信    QQ红包

打开支付宝扫一扫
js 显示隐藏div简单效果
本文标签:这篇文章木有标签
版权声明:若无特殊注明,本文皆为“懒人的小窝”原创,转载请保留文章出处。
本文链接:http://suppore.cn/271.html   百度已收录

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论

1条评论
  1. avatar

    摩天之星 Lv.2    广东省深圳市 电信    回复

    还是实践出真相,比如我现在做优化,很多以前教的和自己实际操作还是会有一些出处的