隐藏li
现在与我想象中有点出入求帮手修改下（理想中:<li>里面内容是隐藏的，当鼠标移动到导航条才会弹出。）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#body{margin:0px;}
#char{
background-color:#66FF66;
width:811px;
height:570px;
margin:auto;
}
#head {
width:811px;
height:67px;
}
#head_a {
background-image:url(images/1_02.gif.gif);
width:209px;
height:67px;
}
#head_b {
background-color:#FFFFFF;
float:right;
width:602px;
height:67px;
margin-top:-67px;
}
#tit{
width:100%;
height:25px;
line-height:25px;
}
#tit h3{
margin:0px;
padding:0px;
width:88px;
background:#ccc;
float:left;
line-height:25px;
text-align:center;
border:1px solid white;
font-size:12px;
color:white;
}
#content{
width:100%;
height:175px;
background:#888;
}
#content div{
display:none;
}
#content .one{
display:block;
}
#tit .titin{
border:2px solid #888;
background:#888;
}
</style>
</head>
<body>
<div id="char">
<div id="head">
<div id="head_a"></div>
<div id="head_b"></div>
</div>
<div id="tit">
<h3 onmouseover="show(0)" class="titin">首页</h3>
<h3 onmouseover="show(1)">关于我们</h3>
<h3 onmouseover="show(2)">新闻中心</h3>
<h3 onmouseover="show(3)">产品中心</h3>
</div>
<div id="content">
<div class="one">
<ul>
<li>aaas</li>
<li>aaag</li>
<li>aaasg</li>
<li>aaaaa</li>
<li>aaaaa</li>
</ul>
</div>
<div>
<ul>
<li>bbbbb</li>
<li>bbbbbbb</li>
</ul>
</div>
<div>
<ul>
<li>cccc</li>
</ul>
</div>
<div>
<ul>
<li>cccc</li>
</ul>
</div>
</div>
</div>
<script>
var h3os=document.getElementsByTagName("h3");
var cdivs=document.getElementById("content").getElementsByTagName("div");
function show(num){
for(var i=0; i<h3os.length; i++){
if(i==num){
h3os[num].className="titin";
cdivs[num].style.display="block"
}else{
h3os[i].className="";
cdivs[i].style.display="none";
}
}
}
</script>
</body>
</html>
[解决办法]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">#body{margin:0px;}#char{background-color:#66FF66; width:811px; height:570px; margin:auto;}#head { width:811px; height:67px;}#head_a { background-image:url(images/1_02.gif.gif); width:209px; height:67px;}#head_b {background-color:#FFFFFF; float:right; width:602px; height:67px; margin-top:-67px;}#tit{ width:100%;height:25px;line-height:25px;}#tit h3{margin:0px;padding:0px;width:88px;background:#ccc;float:left;line-height:25px;text-align:center;border:1px solid white;font-size:12px;color:white;}#content{width:100%;height:175px;}#content div{display:none;}#content .one{}#tit .titin{border:2px solid #888;background:#888;}</style></head><body><div id="char"><div id="head"><div id="head_a"></div><div id="head_b"></div></div><div id="tit"><h3 onmouseover="show(0)">首页</h3><h3 onmouseover="show(1)">关于我们</h3><h3 onmouseover="show(2)">新闻中心</h3><h3 onmouseover="show(3)">产品中心</h3></div><div id="content"><div class="one"><ul><li>aaas</li><li>aaag</li><li>aaasg</li><li>aaaaa</li><li>aaaaa</li></ul></div><div><ul><li>bbbbb</li><li>bbbbbbb</li></ul></div><div><ul><li>cccc</li></ul></div><div><ul><li>cccc1</li></ul></div></div></div><script>var h3os=document.getElementsByTagName("h3");var cdivs=document.getElementById("content").getElementsByTagName("div");function show(num){for(var i=0; i<h3os.length; i++){if(i==num){h3os[num].className="titin";cdivs[num].style.display="block"}else{h3os[i].className="";cdivs[i].style.display="none"; }}}</script></body></html>
[解决办法]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">#body { margin:0px;}#char { background-color:#66FF66; width:811px; height:570px; margin:auto;}#head { width:811px; height:67px;}#head_a { background-image:url(images/1_02.gif.gif); width:209px; height:67px;}#head_b { background-color:#FFFFFF; float:right; width:602px; height:67px; margin-top:-67px;}#tit { width:100%; height:25px; line-height:25px;}#tit h3 { margin:0px; padding:0px; width:88px; background:#ccc; float:left; line-height:25px; text-align:center; border:1px solid white; font-size:12px; color:white;}#content { width:100%; height:175px; background:#888;}#content div { display:none;}#content .one { display:block;}#tit .titin { border:2px solid #888; background:#888;}</style></head><body><div id="char"> <div id="head"> <div id="head_a"></div> <div id="head_b"></div> </div> <div id="tit"> <h3 onmouseover="show(0)" class="titin">首页</h3> <h3 onmouseover="show(1)">关于我们</h3> <h3 onmouseover="show(2)">新闻中心</h3> <h3 onmouseover="show(3)">产品中心</h3> </div> <div id="content"> <div class="one"> <ul> <li>aaas</li> <li>aaag</li> <li>aaasg</li> <li>aaaaa</li> <li>aaaaa</li> </ul> </div> <div> <ul> <li>bbbbb</li> <li>bbbbbbb</li> </ul> </div> <div> <ul> <li>cccc</li> </ul> </div> <div> <ul> <li>cccc</li> </ul> </div> </div></div><script>document.getElementById('content').style.display = 'none';var h3os=document.getElementsByTagName("h3");var cdivs=document.getElementById("content").getElementsByTagName("div");function show(num) { document.getElementById('content').style.display = 'block'; for (var i = 0; i < h3os.length; i ++) { h3os[i].className = ''; cdivs[i].style.display = 'none'; } h3os[num].className = 'titin'; cdivs[num].style.display = 'block';}document.getElementById('content').onmouseover = function() { this.style.display = 'block'; }document.getElementById('content').onmouseout = function() { this.style.display = 'none'; }</script></body></html>