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    百度已收录
正文到此结束

点击下方支持本站

点击支持下贵站吧
点击支持下贵站吧

热门推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

微笑可爱憨笑鼓掌白眼发呆撇嘴色得意吐抠鼻可怜呲牙惊讶冷汗流泪大哭发怒抚摸傲慢惊恐鄙视疑问奸笑抓狂偷笑流汗擦汗晕委屈吓衰糗大了威武给力牛逼

评论信息框

火箭正在发射中...

已有1条吐槽

摩天之星

2016-11-25 12:16 广东省深圳市电信
还是实践出真相,比如我现在做优化,很多以前教的和自己实际操作还是会有一些出处的
 Windows 7 x64   Firefox 50.0