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

2016-02-20 00:34 57 1 收藏

下面，图老师小编带您去了解一下用js实现select对div的隐藏与显示，生活就是不断的发现新事物，get新技能~

【 tulaoshi.com - Web开发】

!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;idivArray.length;i++) {
if (divArray[i].id == a) {
divArray[i].style.display='';
}else {
divArray[i].style.display='none';
}
}
}
/script

div id=xxx

div id=aaa
h1aa/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

来源:http://www.tulaoshi.com/n/20160220/1632134.html

上一篇： JavaScript中splice数组函数
下一篇：学习 javascript 注意的4个问题

看过《用js实现select对div的隐藏与显示》的人还看了以下文章更多>>

用js实现select对div的隐藏与显示 02-20
实现标题条的显示与隐藏 01-29
JS对HTML标签select的操作 02-19
用javascript实现select的美化 02-19
用javascript实现select的美化的方法 02-19
用javascript实现不按Ctrl实现Multiple Select多选 02-19
js实现图片显示局部鼠标经过显示全部的效果 02-19
js 调整select 位置的函数 02-19
用js得到网页中所有的div的id 02-19
用js实现过滤script的正则 02-19

JQuery SELECT单选模拟jQuery.select.js

标签： Web开发

基于jQuery JavaScript Library v1.3.2 的单选模拟 (本文件是跟据 zhangjingwei 的Jquery Select(单选) 模拟插件 V1.3.4 修改而来的) a. 修改的主要原因是，原来的zhangjingwei的模拟在显示方式上的问题。在跟文字交替出现时会出现错位。现将模拟DIV的display修改为inline方式。更自然的嵌入到文本行中。 b.在加载文件后自动转化样式名为'com...

JS实现的滑动展开与折叠效果

要写个滑动展开折叠的效果，搜索到无忧脚本的一篇贴子，稍加修改了下使其在FF也可应用，代码如下： <script type="text/javascript" //Url: http://bbs.51js.com/thread-61646-1-1.html //Author: 风云突变 //Modify: 枫岩 var act; function over(s,nMax){ ...

用Class组合实现Div+CSS布局

标签： Web开发

现在编写xhtml，我们强烈不推荐此种方法，应该是id，class综合应用。此文章只是讲述一种思维，并非建站过程中的方法！用标准件的方式来组装网页DIV布局。我把class分为2种：布局class；风格class。布局class是骨架，风格class是衣服。举个例子：比如布局中的左栏。首先它的属性有：是左栏，宽度，背景颜色，字体颜色等。...

用js实现的抽象CSS圆角效果!!

标签： Web开发

大概是去年的时候吧,就在网上见过了现成的CSS圆角效果的CSS及HTML代码,例如: html head titlecss圆角效果/title meta http-equiv="content-type" content="text/html; charset=gb2312" style type="text/css" div.RoundedCorner{background: #9BD1FA} b.rtop, b.rbottom{display:block;background: ...

Android键盘显示与隐藏代码

标签：编程语言网络编程

Java代码代码如下： InputMethodManager imm = (InputMethodManager)getSystemService(SendActivity.this.INPUT_METHOD_SERVICE); //显示键盘 imm.showSoftInput(editText, 0); //隐藏键盘 imm.hideSoftInputFromWindow(editText.getWindowToken(), 0);

查看更多精彩>>