javascript实现信息的显示和隐藏如注册页面_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>

时间: 2024-09-17 21:50:16

javascript实现信息的显示和隐藏如注册页面_javascript技巧的相关文章

javascript实现div的显示和隐藏的小例子_javascript技巧

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

javascript实现信息的显示和隐藏

 信息的显示和隐藏在某些时候还是比较使用的,就比如注册信息,下面有个不错的示例,感兴趣的朋友可以了解下 我们在写注册页面的时候,必填信息是可见的,可选信息是隐藏的,如果用户希望填写,可以单击"详细信息".  代码如下: <!-- 下面代码通过javascript实现信息的显示和隐藏 -->  <!DOCTYPE html>  <html>  <head>  <meta charset="UTF-8">  &

javascript实现显示和隐藏div方法汇总_javascript技巧

javascript实现显示和隐藏div方法汇总 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>15种方法实现div显示和隐藏</title> <script src="js/base.js"></script> <style> body{ mar

Javascript点击其他任意地方隐藏关闭DIV实例_javascript技巧

代码如下,实现了点击input显示一个div层,当点击除input和div以外的地方的时候,隐藏div的功能. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>点击其它地方关闭DIV</title> </head> <body> <input type="text" value="

javascript使用定时函数实现跳转到某个页面_javascript技巧

有时我们跳转到一个页面处理完任务,然后又回到原来的页面,这个在很多的下载网站可以看到,这样做也是为了留住用户. 这个用javascript的定时函数很容易实现. window.setTimeout( code,time) // code 执行的代码 time 设置的时间 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml

JavaScript Event学习第五章 高级事件注册模型_javascript技巧

W3C和微软都着力于发展自己的事件注册模型来取代Netscape的传统模型.虽然对于微软的模型我不是很感冒,但是w3c的还是不错的,除了这个鼠标定位 的问题.不过现在只有小部分浏览器支持. W3C W3C的DOM层面事件规范注意到了传统模式的问题.他对于你想在一个元素上绑定多个事件提供了一个很好的解决办法. W3C事件注册模型的关键就是addEventListener().你给他三个参数:事件类型,要执行的函数和一个布尔值(true或者false)我一会再解释.把我们熟知的doSomething

JS实现隐藏同级元素后只显示JS文件内容的方法_javascript技巧

本文实例讲述了JS实现隐藏同级元素后只显示JS文件内容的方法.分享给大家供大家参考,具体如下: 这里的demo.html文件在打开后会短暂显示与js文件同级的元素后马上隐藏这些元素,并显示同级的demo.js文件内容.具体代码如下: demo.html: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title><

javascript下拉列表中显示树形菜单的实现方法_javascript技巧

很简单的一个使用:点击菜单,能够显示下面的或者不显示.1.主要目的:展现的是的一个菜单项,然后点击一下,隐藏,点一下,弹出下面的内容 用到的是 overflow:hidden    和  overflow="visible"这两个属性 在点击的function中,设置属性应该 node.style.overflow="visible";当然设置tr的高度也是很重要的,要恰好让其他的选项隐蔽 2.采用同样的技术,多加几个,但是就是传参数比较麻烦,采用this传参很常用

js和css写一个可以自动隐藏的悬浮框_javascript技巧

今天写一个小实例,用js和css写一个可以自动隐藏的悬浮框.css肯定是用来控制样式的,js用来控制器显示与隐藏的.显示与隐藏通常有两种方法实现:1,用js控制其显示属性:2,用js控制其大小. 今天要说的就是通过控制其大小来实现元素的显隐,原理:为其注册鼠标移入.移出的事件,当鼠标移出对象范围,将其宽度设为1,当鼠标再次移入该对象,将其宽度还原.很简单,我们一起看看吧! 隐藏状态:   左边那一条窄线就是隐藏以后的悬浮框. 显示状态:   当鼠标滑到左边的悬浮框上,悬浮框就又显示出来了. CS