Question

波纹管代码工作正常

当我点击另一个菜单时如何清除div区域
当我点击手机时，它应显示移动
当我点击电子产品时，它应该显示电子产品

我的代码中的错误

当我点击手机时，它显示移动
当我点击电子产品时，它显示电子产品

BUT - 它没有清除之前点击的值

完整代码

<!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>

Answer 1

清除所有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";
    }

希望这对你有用。

Answer 2

这是因为你永远不会隐藏之前的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会让事情变得更容易。

使用javascript错误在另一个div中显示菜单

2 个答案: