投稿

用js显示隐藏div简单效果

Vedu • • 界面设计, 程序开发 • 阅读 1784

在做网站总后台项目的时候，需要做一个简单的 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>    

 <!-- xiariboke.com -->  

</div>    

    

</body>    

    

</html>  

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/surface/875.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
VeduVedu
0 0
上一篇 2016-10-20 06:41
下一篇 2016-10-20 06:56

相关推荐

发表评论

登录后才能评论