JS实现信息的显示和隐藏

我们在写注册页面的时候,必填信息是可见的,可选信息是隐藏的,如果用户希望填写,可以单击“详细信息”。

代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    function $(idvalue){
        return document.getElementById(idvalue);
    }
    function showtext(){
 if($('text').style.display == 'none'){
     $('text').style.display = '';
 }else{
  $('text').style.display = 'none';
 }
    }
</script>
</head>
<body>
    <div id="text" style="display:none;">这里是隐藏信息</div>
    <button id="morebtn" onclick="showtext();">详细信息</button>
</body>
</html>

JS实现信息的显示和隐藏的更多相关文章

  1. js控制密码的显示与隐藏实例

    原理是建立2个input,一个type是text,一个type是password.在点击按钮时,这两input个的显示状态与val()的值在切换. html: <!DOCTYPE html> ...

  2. JS控制元素的显示和隐藏

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementB ...

  3. js控制元素的显示与隐藏

    <body class="easyui-layout"> <div id = "centerId" data-options="re ...

  4. js控制div样式显示与隐藏,JS通过点击超链接右边(指定位置)显示一个图标

    原文出自:https://blog.csdn.net/seesun2012 javascript基础篇,老土的方法解决js控制div样式,便于新手理解,粗暴的不能再粗暴,如果你是高手,请忽略! 思路: ...

  5. jQuery效果之显示与隐藏

    .hide([duration][,complete])--目标元素的隐藏. .show([duration][,complete])--目标元素的显示: .toggle([duration][,co ...

  6. Js控制显示、隐藏文本框中的密码

    Js控制显示.隐藏文本框中的密码,也可称为是一款小型的JavaScript星号密码破解器,点击会显示出密码类型的文本框中的真实信息,再次点击则还原,程序 主要是获取HTML元素对象,然后强制更改元素属 ...

  7. js 与JQuery显示及隐藏方法

    虽然以后两种方式都能让文本信息隐藏和显示 第一种文本隐藏以后还是会占居位置, 第二种则不会占位置. <p id="p1">这是一段文本.</p> <i ...

  8. js简单显示和隐藏div,触发超链接,动态更改button值,setInterval()简单使用,jquery easyui弹出框简单使用 .

    js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...

  9. JS控制HTML元素的显示和隐藏

    JS控制HTML元素的显示和隐藏 利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 ...

随机推荐

  1. 2014.8.20break,continue,字符串,数字和日期

    (一)break与continue break——彻底终断循环 continue——中断本次循环,继续下次循环 break举例: //求100以内所有质数 ; i <= ; i++) { ;// ...

  2. PHP删除HTMl标签

    /** * 取出html标签 * * @access public * @param string str * @return string * */ function deletehtml($str ...

  3. Hadoop基础概念介绍

    基于YARN的配置信息, 参见: http://www.ibm.com/developerworks/cn/opensource/os-cn-hadoop-yarn/ hadoop入门 - 基础概念 ...

  4. Unity3D Android手机开发环境配置

    Unity3D Android手机开发环境配置 Date:2014-01-01 07:09 1.配置eclipse环境:首先在官网下载安装包:http://developer.android.com/ ...

  5. Vue.jsbrowserify项目模板

    Vue.js——60分钟browserify项目模板快速入门   概述 在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题. 首先,这限定 ...

  6. PCB板上镀镍厚度

    PCB制造工业由于成本.周期时间和材料兼容性的原因,对减少沉淀在电路板上的镍的数量感兴趣.最小镍的规格应该帮助防止铜对金表面的扩散.保持良好的焊接点强度.和较低的接触电阻.最大镍的规格应该允许板制造的 ...

  7. Python GUI开发环境的搭建

    原文:Python GUI开发环境的搭建 最近对Python的开发又来了兴趣,对于Python的开发一直停留在一个表面层的认识,玩的部分比较大. Python的入手简单,语法让人爱不释手,在网络通信方 ...

  8. perl lwp get uft-8和gbk

    gbk编码: jrhmpt01:/root/lwp# cat x2.pl use LWP::UserAgent; use DBI; $user="root"; $passwd='R ...

  9. HDU 5446 Unknown Treasure(Lucas定理+CRT)

    [题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=5446 [题目大意] 给出一个合数M的每一个质因子,同时给出n,m,求C(n,m)%M. [题解] ...

  10. BZOJ 1096 [ZJOI2007]仓库建设(斜率优化DP)

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1096 [题目大意] 有个斜坡,有n个仓库,每个仓库里面都有一些物品,物品数目为p,仓库 ...