向各位大神求助:下拉菜单默认隐藏,默认显示“选项1”,点击“选项1”显示菜单,点击其他选项,div显示相关内容后自动隐藏菜单,菜单显示其他选项名称。现在代码是点击菜单其他选项,div内容有显示相关内容,但是菜单没有自动隐藏。请教下该怎么写?<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>首页</title>
<script type="text/javascript" src="http://jquery.jask.cn/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#options').hide();
$('#settings').click(function(){
$('#options').slideToggle();
$(this).toggleClass("cerrar");
});
});
function a(index){
var div=document.getElementById('list');
var divs=list.getElementsByTagName('div');
for(var i=0;i<divs.length;i++){
divs[i].style.display="none";
}
divs[index-1].style.display="block";
}
</script>
<style>
*{ padding:0; margin:0; border:0;}
a{ text-decoration:none;}
#header {position:absolute;top:0; left:0;width:100%;height:69px;background: #333;text-align:center;}
#header span {font-size:2em; line-height:2.2em;text-align:center;color:white; width:200px; float:left; position:relative; left:28%; }
#settings {width: 110px; height:65px; float:right; position:fixed; top:1px; right:0; color:white; font-size:1.4em; line-height:2.9em; display: block;border-left:#b10000 solid 2px; z-index:3; text-align: center;}
.cerrar {background: #c40000 ; borer-bottom:#c40000 solid 2px;line-height:3em; z-index:3;}
#options {position:fixed; top:66px; left:0; width:100%; background:#c40000; z-index:100; border-top:#960000 solid 1px;border-bottom:#960000 solid 1px; text-align:center;}
.cur{ background: #333;}
.cur,.navlink {width:100%; height:60px; line-height:60px; color: white; text-decoration: none; border-bottom: #b00303 solid 1px; border-top: #dc0c0c solid 1px; font-size:1.4em;}
.liststyle{ position:absolute; top:300px; font-size:44px; }
</style>
</head>
<body>
<div id="header"></div>
<div id="settings">选项1</div>
<ul id="options">
<li onClick="a(1)" class="cur">选项1</li>
<li onClick="a(2)" class="navlink">选项2</li>
<li onClick="a(3)" class="navlink">选项3</li>
</ul>
<div id="list" class="liststyle">
<div id="demo1" style="display:block;">aaaaaaaaaaaaa</div>
<div id="demo2" style="display:none;">bbbbbbbbbbbbbb</div>
<div id="demo3" style="display:none;">ccccccccccccc</div>
</div>
</body>
</html>jsjq
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>首页</title>
<script type="text/javascript" src="http://jquery.jask.cn/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#options').hide();
$('#settings').click(function(){
$('#options').slideToggle();
$(this).toggleClass("cerrar");
});
});
function a(index){
var div=document.getElementById('list');
var divs=list.getElementsByTagName('div');
for(var i=0;i<divs.length;i++){
divs[i].style.display="none";
}
divs[index-1].style.display="block";
}
</script>
<style>
*{ padding:0; margin:0; border:0;}
a{ text-decoration:none;}
#header {position:absolute;top:0; left:0;width:100%;height:69px;background: #333;text-align:center;}
#header span {font-size:2em; line-height:2.2em;text-align:center;color:white; width:200px; float:left; position:relative; left:28%; }
#settings {width: 110px; height:65px; float:right; position:fixed; top:1px; right:0; color:white; font-size:1.4em; line-height:2.9em; display: block;border-left:#b10000 solid 2px; z-index:3; text-align: center;}
.cerrar {background: #c40000 ; borer-bottom:#c40000 solid 2px;line-height:3em; z-index:3;}
#options {position:fixed; top:66px; left:0; width:100%; background:#c40000; z-index:100; border-top:#960000 solid 1px;border-bottom:#960000 solid 1px; text-align:center;}
.cur{ background: #333;}
.cur,.navlink {width:100%; height:60px; line-height:60px; color: white; text-decoration: none; border-bottom: #b00303 solid 1px; border-top: #dc0c0c solid 1px; font-size:1.4em;}
.liststyle{ position:absolute; top:300px; font-size:44px; }
</style>
</head>
<body>
<div id="header"></div>
<div id="settings">选项1</div>
<ul id="options">
<li onClick="a(1)" class="cur">选项1</li>
<li onClick="a(2)" class="navlink">选项2</li>
<li onClick="a(3)" class="navlink">选项3</li>
</ul>
<div id="list" class="liststyle">
<div id="demo1" style="display:block;">aaaaaaaaaaaaa</div>
<div id="demo2" style="display:none;">bbbbbbbbbbbbbb</div>
<div id="demo3" style="display:none;">ccccccccccccc</div>
</div>
</body>
</html>jsjq
解决方案 »
- 判断乘客姓名不能为空
- 想用js写个像csdn博客上那样的日历,但没有思路,请大家指点下
- iframe中如何差入html 主要是ie
- 我的这段代码在FF 下无法执行
- 高手帮我看看这个二级联动
- javascript回调函数的问题
- 高分求助:jsGraphics如何画扇形图
- 节日小游戏之(10)
- 怎么用JavaScript取和设置Struts中<html:text property="tt" value="ddddd">的value值
- 各位大虾:style="display:none和style="display:inline和style="display:block都什么意思?k
- JSP select 复选列表使用技巧
- jquery兼容问题 ie7
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>首页</title>
<script type="text/javascript" src="http://jquery.jask.cn/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#options').hide();
$('#settings').click(function(){
$('#options').slideToggle();
$(this).toggleClass("cerrar");
});
$('li' , $('#options')).click(function(){
$('#settings').html($(this).html());
$('div[id^=demo]' , $('#list')).hide();
$('.cur' , $('#options')).removeClass('cur').addClass('navlink');
$('#demo'+ ($(this).index()+1)).show();
$(this).removeClass('navlink').toggleClass("cur");
$('#options').slideUp();
});
});
</script>
<style>
*{ padding:0; margin:0; border:0;}
a{ text-decoration:none;}
#header {position:absolute;top:0; left:0;width:100%;height:69px;background: #333;text-align:center;}
#header span {font-size:2em; line-height:2.2em;text-align:center;color:white; width:200px; float:left; position:relative; left:28%; }
#settings {width: 110px; height:65px; float:right; position:fixed; top:1px; right:0; color:white; font-size:1.4em; line-height:2.9em; display: block;border-left:#b10000 solid 2px; z-index:3; text-align: center;}
.cerrar {background: #c40000 ; borer-bottom:#c40000 solid 2px;line-height:3em; z-index:3;}
#options {position:fixed; top:66px; left:0; width:100%; background:#c40000; z-index:100; border-top:#960000 solid 1px;border-bottom:#960000 solid 1px; text-align:center;}
.cur{ background: #333;}
.cur,.navlink {width:100%; height:60px; line-height:60px; color: white; text-decoration: none; border-bottom: #b00303 solid 1px; border-top: #dc0c0c solid 1px; font-size:1.4em;}
.liststyle{ position:absolute; top:300px; font-size:44px; }
</style>
</head>
<body>
<div id="header"></div>
<div id="settings">选项1</div>
<ul id="options">
<li class="cur">选项1</li>
<li class="navlink">选项2</li>
<li class="navlink">选项3</li>
</ul>
<div id="list" class="liststyle">
<div id="demo1" style="display:block;">aaaaaaaaaaaaa</div>
<div id="demo2" style="display:none;">bbbbbbbbbbbbbb</div>
<div id="demo3" style="display:none;">ccccccccccccc</div>
</div>
</body>
</html>