显示菜单

波纹管代码工作正常显示菜单

如何清除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>

来源

2014-09-10 sanoj lawrence

使用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

遵循明确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"; 
    }

希望这会对你有用。

来源

2014-09-10 09:56:42

谢谢它的工作原理 – 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会使事情变得更容易。

来源

2014-09-10 10:00:26 RickyHalim

回答

相关问题