下拉菜单控制层的显示与隐藏
2007-11-26 09:39
232 查看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title> 新建网页 </title>
<style type="text/css">
#mylayer div{
display:none;
}
</style>
</head>
<body>
<select id="sel" onchange="f(this);">
<option> a </option>
<option> b </option>
<option> c </option>
<option> d </option>
</select>
<div id="mylayer">
<div style="display:block;"> 层1 </div>
<div> 层2 </div>
<div> 层3 </div>
<div> 层4 </div>
</div>
<script language="javascript">
function f(obj){
var mylayers = document.getElementById("mylayer").getElementsByTagName("DIV");
for(var i=0; i <mylayers.length; i++){
mylayers[i].style.display = "none";
}
mylayers[obj.selectedIndex].style.display = "block";
}
</script>
</body>
<html>
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title> 新建网页 </title>
<style type="text/css">
#mylayer div{
display:none;
}
</style>
</head>
<body>
<select id="sel" onchange="f(this);">
<option> a </option>
<option> b </option>
<option> c </option>
<option> d </option>
</select>
<div id="mylayer">
<div style="display:block;"> 层1 </div>
<div> 层2 </div>
<div> 层3 </div>
<div> 层4 </div>
</div>
<script language="javascript">
function f(obj){
var mylayers = document.getElementById("mylayer").getElementsByTagName("DIV");
for(var i=0; i <mylayers.length; i++){
mylayers[i].style.display = "none";
}
mylayers[obj.selectedIndex].style.display = "block";
}
</script>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 下拉菜单中控制div显示或隐藏
- 用JavaScript来控制对象的显示与隐藏
- Revit中如何控制图元的显示与隐藏
- JS控制table显示或隐藏
- 微信小程序实践之动态控制组件的显示/隐藏功能
- 控制HTML元素的显示与隐藏——display和visibility
- jQuery控制元素显示、隐藏、切换、滑动的方法
- jQuery控制元素显示、隐藏、切换、滑动的方法总结
- JavaScript控制页面显示和隐藏带案例
- 动态控制html元素显示/隐藏
- checkbox控制显示隐藏
- Asp.net中DataGrid利用DataRelation显示主从表信息(可控制从表信息隐藏和显示).(DataGrid 嵌套)
- JS控制HTML元素的显示和隐藏
- 模板时候控制标签显示和隐藏
- 返回顶部隐藏显示的控制代码
- vue移动端项目中返回上一路由页面、根据当前路由信息控制返回键的显示与隐藏
- JavaScript——控制div的显示隐藏
- Asp.net 动态控制GridView列的显示和隐藏
- js动态控制表单的tr，td的显示和隐藏
- 教程-隐藏/显示任务栏-程序不在任务显示-全面控制Windows