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. English - even though和even if用法解析

    even though和even if的用法区别两者均可用于引导让步状语从句,其细微区别是: 1. even if 引导的从句是往往是假设性的,相当于汉语的“即使”“纵然”“就算”“哪怕”. 如:Th ...

  2. SSH框架的简化

    ---恢复内容开始--- 一.简易化的SSH框架,如图: SSH框架的搭建,我就不多说了. 二.简易的ssh框架的步骤: 1.重新编写applicationContext.xmlwen文件 <一 ...

  3. 关于 WP上应用调试时报错“指定的通信资源(端口)”已由另一个应用程序使用 问题

    问题来源 碰到这个问题是调试wp7项目的时候,之前因为安装的是wp8.0的sdk 包括wp7.5所以wp7的也能用,后来不知道怎么回事wp7项目就不能调试了总是显示启动而不是 device或者是虚拟机 ...

  4. lua math libary

    函数名 描述 示例 结果 pi 圆周率 math.pi 3.1415926535898 abs 取绝对值 math.abs(-2012) 2012 ceil 向上取整 math.ceil(9.1) 1 ...

  5. Ubuntu 14.04 上使用 Nginx 部署 Laravel

    本教程将会涉及以下工具: Ubuntu 14.04 LTS PHP 5.5 MySQL Laravel 5.0 Nginx 参考文章:Ubuntu 14.04 上使用 Nginx 部署 Laravel ...

  6. XSS CSRF

    XSS CSRF XSS 参考 https://zh.wikipedia.org/wiki/%E8%B7%A8%E7%B6%B2%E7%AB%99%E6%8C%87%E4%BB%A4%E7%A2%BC ...

  7. Linux 关机

    1. shutdown shutdown -h now 立刻关机 shutdown -h 22:50 22:50 分的时候关机 shutdown -h +10 10分钟后关机 shutdwon -r ...

  8. 电脑Win7如何取得文件管理所有权(提供各种GHOST版本的Windows)

    电脑Windows7系统如何取得文件管理所有权?从 VISTA开始,微软对操作系统的安全性有了明显的提高,这样使得以前我们在XP下都可以打开或删除的文件(夹),无法在WIN7下进行操作.就算是在 Ad ...

  9. 深入浅出Win32多线程程序设计之基本概念

    一.深入浅出Win32多线程程序设计之基本概念[转] 引言 从单进程单线程到多进程多线程是操作系统发展的一种必然趋势,当年的DOS系统属于单任务操作系统,最优秀的程序员也只能通过驻留内存的方式实现所谓 ...

  10. Min Stack (LeetCode) tweak it to avoid Memory Limit Exceeded

    class MinStack { public: void push(int x) { if(values.empty()) { values.push_back(x); min_indices.pu ...