显示菜单在另一个div使用javascript错误 [英] display menu in another div using javascript error
本文介绍了显示菜单在另一个div使用javascript错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
li>当我点击移动应该显示移动
我的代码中有错误
- 当我点击移动设备显示移动设备
- 电子产品显示电子产品
BUT
- 不清除先前点击的值
全部代码
<！DOCTYPE html&
< html lang =enclass =no-js>
< head>
< meta charset =UTF-8/>
< title>蓝图：垂直图标菜单< / title>
< link rel =shortcut iconhref =../ favicon.ico>
< link rel =stylesheettype =text / csshref =css / leftmenu.css/>
< link rel =stylesheettype =text / csshref =flaticon.css/>
< style>
body {position：relative; font-family：'Lato'，Calibri，Arial，sans-serif; color：＃47a3da;}
body，html {font-size：100％;高度：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>
头
< / 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（）;>车辆< / a>< / li>
< li>< a href =＃onClick =hme（）;> home< / a>< / li>
< / ul>
< / div>
< div class =dis123>
display
< div id =mobistyle =display：none; z-index：99; class =answer_list>手机< / div>
< div id =elecstyle =display：none; z-index：99; class =answer_list> electronics< / div>
< div id =vehistyle =display：none; z-index：99; class =answer_list> vehicles< / div>
< div id =homestyle =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>
解决方案
清除所有div（隐藏所有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;
}
希望这会对你有用。
The bellow code works fine
- how to clear the div area when another menu i clicked
- when i click mobile it should display mobile
- and when i click electronics it should display electronics
ERROR IN MY CODE
- when i click mobile it display mobile
- when i click electronics it display electronics
BUT - its not clearing the previous clicked value
FULL CODE
<!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>
解决方案
Following clear the all divs(Hides the all 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";
}
So in every mouse click request we hide the all DIVs and show the requested DIV.
function mob() {
hidemenus();
document.getElementById('mobi').style.display = "block";
}
Hope this would work for you.
这篇关于显示菜单在另一个div使用javascript错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
