显示菜单
问题描述：
波纹管代码工作正常显示菜单
- 如何清除DIV区域时，另一个菜单我点击
- 当我点击移动它应该显示移动
- 当我点击电子应该显示电子
错误在我的代码
- 当我点击移动它显示移动
- 当我点击电子这显示电子
但 - 它不清除以前的点击值
全码
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<title>Blueprint: Vertical Icon Menu</title>
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/leftmenu.css" />
<link rel="stylesheet" type="text/css" href="flaticon.css" />
<style>
body {position: relative;font-family: 'Lato', Calibri, Arial, sans-serif; color: #47a3da;}
body, html { font-size: 100%; height: 100%; padding: 0; margin: 0;}
a {color:#f0f0f0;text-decoration: none;}
a:hover {color: #000;}
#header{height: 90px;width: 100%;background-color: #B9F5BB;}
#footer{height: 50px;width: 100%;background-color: #FDD5CB;}
.dis123{width:75%;float:left; height: 500px;background-color:#DCEEE3; text-align: left; }
.postleftmen{width:25%;float:left;}
</style>
</head>
<body>
<div id="header">
Head
</div>
<div class="postleftmen">
<ul class="cbp-vimenu">
<li><a href="#" onClick="mob();">mobile</a></li>
<li><a href="#" onClick="ele();">electroics</a></li>
<li><a href="#" onClick="veh();">vehicle</a></li>
<li><a href="#" onClick="hme();">home</a></li>
</ul>
</div>
<div class="dis123">
display
<div id="mobi" style="display:none;z-index:99;" class="answer_list" >mobiles</div>
<div id="elec" style="display:none;z-index:99;" class="answer_list" >electronics</div>
<div id="vehi" style="display:none;z-index:99;" class="answer_list" >vehicles</div>
<div id="home" style="display:none;z-index:99;" class="answer_list" >home</div>
</div>
<div style="clear:both"> </div>
<div id="footer">
Footer
</div>
<script>
function mob() {
document.getElementById('mobi').style.display = "block";
}
function ele() {
document.getElementById('elec').style.display = "block";
}
function veh() {
document.getElementById('vehi').style.display = "block";
}
function hme() {
document.getElementById('home').style.display = "block";
}
</script>
</body>
</html>
答
遵循明确all divs（隐藏所有DIVS）
function hidemenus() {
document.getElementById('mobi').style.display = "none";
document.getElementById('elec').style.display = "none";
document.getElementById('vehi').style.display = "none";
document.getElementById('home').style.display = "none";
}
因此，在每次鼠标点击请求中，我们隐藏所有的DIV并显示请求的DIV。
function mob() {
hidemenus();
document.getElementById('mobi').style.display = "block";
}
希望这会对你有用。
+1
谢谢它的工作原理 – 2014-09-10 10:01:32
答
这是因为你永远不会隐藏以前的div。 你可以做的是将当前活动的一个保存在一个变量中，并在点击链接时将其关闭。
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<title>Blueprint: Vertical Icon Menu</title>
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/leftmenu.css" />
<link rel="stylesheet" type="text/css" href="flaticon.css" />
<style>
body {position: relative;font-family: 'Lato', Calibri, Arial, sans-serif; color: #47a3da;}
body, html { font-size: 100%; height: 100%; padding: 0; margin: 0;}
a {color:#f0f0f0;text-decoration: none;}
a:hover {color: #000;}
#header{height: 90px;width: 100%;background-color: #B9F5BB;}
#footer{height: 50px;width: 100%;background-color: #FDD5CB;}
.dis123{width:75%;float:left; height: 500px;background-color:#DCEEE3; text-align: left; }
.postleftmen{width:25%;float:left;}
</style>
</head>
<body>
<div id="header">
Head
</div>
<div class="postleftmen">
<ul class="cbp-vimenu">
<li><a href="#" onClick="mob();">mobile</a></li>
<li><a href="#" onClick="ele();">electroics</a></li>
<li><a href="#" onClick="veh();">vehicle</a></li>
<li><a href="#" onClick="hme();">home</a></li>
</ul>
</div>
<div class="dis123">
display
<div id="mobi" style="display:none;z-index:99;" class="answer_list" >mobiles</div>
<div id="elec" style="display:none;z-index:99;" class="answer_list" >electronics</div>
<div id="vehi" style="display:none;z-index:99;" class="answer_list" >vehicles</div>
<div id="home" style="display:none;z-index:99;" class="answer_list" >home</div>
</div>
<div style="clear:both"> </div>
<div id="footer">
Footer
</div>
<script>
var currentDisplay = "";
function mob() {
if (currentDisplay != "")
document.getElementById(currentDisplay).style.display = "none";
document.getElementById('mobi').style.display = "block";
currentDisplay = "mobi";
}
function ele() {
if (currentDisplay != "")
document.getElementById(currentDisplay).style.display = "none";
document.getElementById('elec').style.display = "block";
currentDisplay = "elec";
}
function veh() {
if (currentDisplay != "")
document.getElementById(currentDisplay).style.display = "none";
document.getElementById('vehi').style.display = "block";
currentDisplay = "vehi";
}
function hme() {
if (currentDisplay != "")
document.getElementById(currentDisplay).style.display = "none";
document.getElementById('home').style.display = "block";
currentDisplay = "home";
}
</script>
</body>
</html>
提示：使用jquery会使事情变得更容易。
使用java错误？ – 2014-09-10 09:51:45
@kougiland它不清除之前的值，当我点击下一个 – 2014-09-10 09:53:04
可能重复[显示子菜单在另一个div使用脚本]（http://stackoverflow.com/questions/25759239/display-sub-menu-in-another -div-using-script） – 2014-09-10 09:53:28