顯示菜單

波紋管代碼工作正常顯示菜單

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

回答

相關問題