在做网站总后台项目的时候，需要做一个简单的 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
微信扫一扫
支付宝扫一扫
相关推荐
-
Flutter适配移动端和web不同尺寸
用到的库 这款开源的库,可以实现不同屏幕尺寸的适配.responsive_builder 使用方法 1. pubspec.yaml引入库 responsive_builder: ^…
-
动态计算视频窗口的高度自适应电脑和移动端
相信很多草根站长都有视频的功能吧~同样，我的网站也有视频。我的视频是放到优酷上面的，使用iframe的方式引用。但是复制下来的代码不尽如人意，移动端自适应没有那么理想。我的目标就是…
-
登录页设计需要注意的细节和逻辑
我们在使用大多产品时，刚进入软件都需要一个登录或者注册的动作，每个软件的登陆方式页面都差不多，但一些小的细节体验最能影响用户；本文作者分享了关于登录页设计细节和逻辑，我们一起来了解…
-
不用JS和CSS独立完成许多牛掰的页面布局功能
前言 在日常项目开发中，在布局方面有遇到哪些问题了？今天来一起看看CSS布局有哪些小技巧，后续开发更轻松。本文主要通过简单的示例，讲述开发中遇到的布局等问题，但不仅限于布局相关，会…
-
利用jquery插件让web前端实现头像上传、裁剪功能
现在很多应用都会要求上传个人头像，然后系统会根据上传的头像进行裁剪，这样处理后的头像会更加美观 今天小编就教大家利用jquery插件实现这样的效果，做出web页面，这是手机端和PC…
-
MySQL的闪回工具–MyFlash
前言 MyFlash 是美团点评开源的一个 MySQL 闪回工具，可以用来回滚 MySQL 中的 DML 操作，恢复到某时刻的数据。本文将简单地介绍 MySQL 闪回工具 MyFl…
-
Vue+Element UI实现断点续传、分片上传、秒传
凡是要知其然知其所以然 文件上传相信很多朋友都有遇到过，那或许你也遇到过当上传大文件时，上传时间较长，且经常失败的困扰，并且失败后，又得重新上传很是烦人。那我们先了解下失败的原因吧…
-
企业网站问题的深层次分析
从表现形式来看，每个网站的问题可能都有所不相同，但从实质上来说，其根本原因是相似的，也就是说都具有共同的缺陷特征。从现象来看，这种状况通常被认为是企业网站运营策略失当，如网站推广不力、信息更新不及时等，但从更深入的层次上分析，则是由于缺乏对企业网站功能、企业网站的本质以及企业网站与网络营销之间关系等基本问题的深入了解所致。
-
UI简约风格设计指南
极简主义是体现短语“少即是多”的概念。它也是一个以多种形式跨越我们生活的概念：对于某些人而言，这是一种生活方式，对于另一些人而言，则是一种组织的思维方式，甚至有些人甚至认为它看起来…
