用js实现select对div的隐藏与显示

用js实现select对div的隐藏与显示

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>

<body>

 

<script type="text/javascript">
function change(a){
 var xxx = document.getElementById("xxx");
 var divArray = xxx.getElementsByTagName("div");
 for (var i=0;i<divArray.length;i++) {
  if (divArray[i].id == a) {
   divArray[i].style.display='';
  }else {
   divArray[i].style.display='none';
  }
 }
}
</script>

 

<div id=xxx>

<div id=aaa>
<h1>aa</h1>
aaaa
</div>
<div id=bbb style="display:none ">
bbbb
</div>
<div id=ccc style="display:none ">
cccc
</div>

</div>

<select onChange="change(this.value)">
  <option value="aaa">aaa</option>
  <option value="bbb">bbb</option>
  <option value="ccc">ccc</option>
</select>
</body>
</html> 

时间: 2024-10-26 11:53:02

用js实现select对div的隐藏与显示的相关文章

JS使用cookie实现DIV提示框只显示一次的方法_javascript技巧

本文实例讲述了JS使用cookie实现DIV提示框只显示一次的方法.分享给大家供大家参考,具体如下: 这里运用JavaScript的cookie技术,控制网页上的提示DIV只显示一次,也就是当用户是第一次打开网页的时候才显示,第二次自动隐藏起来,很好的提升了用户体验,不会使用户烦感:利用Cookies,我们还可做超多的事情,慢慢体会吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-cookie-div-dlg-show-once-cod

jquery和js实现对div的隐藏和显示方法

 jQuery对div的显示和隐藏: 显示:    代码如下: $("#id").show() 隐藏: 代码如下: $("#id").show()   js对div的显示和隐藏: div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白   代码如下: style="visibility: none;" document.getElementById("typediv1").style.visibilit

jquery和js实现对div的隐藏和显示方法_jquery

jQuery对div的显示和隐藏: 显示: 复制代码 代码如下: $("#id").show() 隐藏: 复制代码 代码如下: $("#id").show() js对div的显示和隐藏: div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白 复制代码 代码如下: style="visibility: none;" document.getElementById("typediv1").style.vi

JQuery DIV 动态隐藏和显示的方法_jquery

1. 如果在载入是隐藏: <head> <script language="javascript"> function HideWeekMonth() { $("#tt1").hide(); $("#tt2").hide(); } </script> </head> <body onLoad="HideWeekMonth()"> </body> 2. 动态

js tr控制下面的tbody隐藏和显示_javascript技巧

脚本 小说 看书了文学网

html-js动态生成的div在ie9下显示正常而在ie8下显示错位

问题描述 js动态生成的div在ie9下显示正常而在ie8下显示错位 html代码如下: js代码如下: function logIn(){ var new_page=document.createElement("div");//创建遮蔽层div new_page.style.position="absolute"; new_page.style.top=0; new_page.style.left=0; new_page.style.width=document

如何使js控制DIV层显示隐藏(页面可刷新)时,只能隐藏不能显示,

问题描述 这段代码中,是可以用JS控制cookies隐藏DIV层,并且刷新也可以始终隐藏,但是如何做到当DIV层隐藏后,页面中有显示DIV层的提示我的设想是:当DIV层显示时,选择隐藏,页面刷新依然隐藏(已经做到了)当DIV隐藏后,可以选择显示,页面刷新可以显示DIV层(没做到)也就是用Js控制DIV的显示与隐藏,并存入cookies,直到下一次操作JS依然有效控制<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"&q

js实现select选择框效果及美化_javascript技巧

网上有各种各样的关于 select 选择框的美化,找了很多,并没有好的样式效果.所以就找了一个利用 ul li 做的类似 select 选择框的效果,不废话了,先上图,效果如下: 点击一个 test ,就会把列表显示出来,再次点击,列表隐藏,选择一个 li ,就会把 span 里的内容替换成 li 的内容,然后可以用 js 监控 span 的变化,然后执行你的代码.效果如下:  html 代码如下:  <div id="type" class="test"&g

js自定义select下拉框美化特效_javascript技巧

select的默认样式往往很丑,为保证页面样式风格统一,需要对select进行美化.虽然其美化的插件很多,一搜一大把,但是需要引入长长的css文件和js文件实在是件头痛的事.其实select的实现原理很简单,就是一个点击 切换 显示和隐藏 并传值 的过程.用jquery模拟了,样式想怎么写就怎么写,且不限数量. 朴素的效果: html: <div class="select_box"> <font>›</font> <span>选项1&l