javascript实现信息的显示和隐藏如注册页面

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


代码如下:

<!-- 下面代码通过javascript实现信息的显示和隐藏 -->
<!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>

赞 (0)

相关推荐

  • javascript 隐藏/显示指定的区域附HTML元素【legend】用法

    javascript code: 代码 复制代码 代码如下: function expandOther(el, el2) { whichEl = document.getElementById(el) button = document.getElementById(el2) if (whichEl.style.display == 'none') { whichEl.style.display = ''; button.value = "隱藏"; } else { whichEl.s

  • javascript实现div的显示和隐藏的小例子

    复制代码 代码如下: <html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>oec2003</title><script language="JavaScript" type="text/JavaScript"><!--func

  • Javascript显示和隐藏ul列表的方法

    本文实例讲述了Javascript显示和隐藏ul列表的方法.分享给大家供大家参考.具体如下: <ul id="rightNav"> <li> <h2 class="rightNavItem"><a href="#">Show & Hide</a></h2> <ul> <li><a href="">Links et

  • javascript 层隐藏和显示的代码

    层隐藏和显示 2009-7-7 function doit(){ var m = document.getElementById("menu"); m.innerText = m.innerText == "更多"?"收起":"更多"; document.getElementById("content1").style.display = m.innerText == "更多"?&quo

  • javascript显示隐藏层比较不错的方法分析

    这是一个Q&A的页面,设计师希望能够点击相关的问题后,在它下方显示对应的答案.这是一个比较常见功能,通常的解决办法是把"答案"当作整个问题容器的子元素,然后点击父元素上的按钮后展开对应的子元素.通过父子元素的对应关系来匹配标题和答案. 但是当初写html的时候并没有考虑到脚本编写(需求是后加的),所以,答案和标题没有父子关系可以对应. html代码如下. 所以,这里需要用到另一种方法来匹配答案和标题.我们可以通过捕捉元素的位置来匹配它们.也就是说第一条标题,对应的肯定是整个序列

  • Javascript与jQuery方法的隐藏与显示

    示例代码很简单,直接奉上,就不多废话了 复制代码 代码如下: <html> <head> <title>denotoggle</title> <style> #box {     width: 100px;     height: 100PX;     background-color: #ddd } .show {     visibility: hidden; } </style> <script src="jqu

  • JavaScript栏目列表隐藏/显示简单实现

    1.构建JavaScript库 复制代码 代码如下: (function(){ //将命名空间IC注册到window window['JSHide']={}; //隐藏侧边栏,并将图片换成右箭头图片 function yc() { document.getElementById("cloone").style.display ="none"; document.getElementById("img").innerHTML ="<

  • JAVASCRIPT 点击显示 隐藏层

    JAVASCRIPT 点击显示 隐藏层

    点击显示/隐藏层 //code from www.jb51.net a{text-decoration:none;} .tab{border:1px solid #e57243;border-top:0;margin:10px 0;text-align:left;width:200px;font-size:14px;} .th{border-top:1px solid #e57243;padding:5px;font-weight:700;clear:both;background:#f5e1d

  • javascript 控制 html元素 显示/隐藏实现代码

    1.编写js函数 <script type="text/javascript"> function display(y){$(y).style.display=($(y).style.display=="none")?"":"none";} function $(s){return document.getElementById(s);} </script> 2. 要显示/隐藏的html元素加上 id

  • javascript控制层显示或隐藏的方法

    本文实例讲述了javascript控制层显示或隐藏的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>中国风</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <script language="JavaScript&qu

随机推荐