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

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

javascript jquery html css

使用javascript错误在另一个div中显示菜单,javascript,jquery,html,css,Javascript,Jquery,Html,Css,下面的代码运行良好如何在单击另一个菜单时清除div区域当我单击“移动”时，它将显示“移动” 当我点击电子设备时，它会显示电子设备我的代码中有错误当我单击“移动”时，它将显示“移动” 当我单击“电子”时，它会显示“电子” 但是 -它没有清除以前单击的值完整代码 <!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta charset="UTF-8" />

下面的代码运行良好

如何在单击另一个菜单时清除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>


蓝图：垂直图标菜单
正文{位置：相对；字体系列：'Lato'，Calibri，Arial，无衬线；颜色：#47a3da；}
正文，html{字体大小：100%；高度：100%；填充：0；边距：0；}
a{color:#f0；文本装饰：无；}
a:悬停{color:#000；}
#标题{高度：90px；宽度：100%；背景色：#B9F5BB；}
#页脚{高度：50px；宽度：100%；背景色：#FDD5CB；}
.dis123{宽度：75%；浮点：左；高度：500px；背景色：#DCEEE3；文本对齐：左；}
.postleftmen{宽度：25%；浮动：左；}
头






陈列
手机
电子学
车辆
家
页脚
函数mob（）{
document.getElementById（'mobi'）.style.display=“block”；
}
函数ele（）{
document.getElementById（'elec'）.style.display=“block”；
}
函数veh（）{
document.getElementById（'vehi'）.style.display=“block”；
}
函数hme（）{
document.getElementById（'home'）.style.display=“block”；
}

以下是清除所有div（隐藏所有div）

因此，在每个鼠标单击请求中，我们隐藏所有DIV并显示请求的DIV

    function mob() {
        hidemenus();
        document.getElementById('mobi').style.display = "block";
    }

希望这对您有用。

这是因为您从不隐藏以前的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>


蓝图：垂直图标菜单
正文{位置：相对；字体系列：'Lato'，Calibri，Arial，无衬线；颜色：#47a3da；}
正文，html{字体大小：100%；高度：100%；填充：0；边距：0；}
a{color:#f0；文本装饰：无；}
a:悬停{color:#000；}
#标题{高度：90px；宽度：100%；背景色：#B9F5BB；}
#页脚{高度：50px；宽度：100%；背景色：#FDD5CB；}
.dis123{宽度：75%；浮点：左；高度：500px；背景色：#DCEEE3；文本对齐：左；}
.postleftmen{宽度：25%；浮动：左；}
头






陈列
手机
电子学
车辆
家
页脚
var currentDisplay=“”；
函数mob（）{
如果（currentDisplay！=“”）
document.getElementById（currentDisplay）.style.display=“无”；
document.getElementById（'mobi'）.style.display=“block”；
currentDisplay=“mobi”；
}
函数ele（）{
如果（currentDisplay！=“”）
document.getElementById（currentDisplay）.style.display=“无”；
document.getElementById（'elec'）.style.display=“block”；
currentDisplay=“elec”；
}
函数veh（）{
如果（currentDisplay！=“”）
document.getElementById（currentDisplay）.style.display=“无”；
document.getElementById（'vehi'）.style.display=“block”；
currentDisplay=“vehi”；
}
函数hme（）{
如果（currentDisplay！=“”）
document.getElementById（currentDisplay）.style.display=“无”；
document.getElementById（'home'）.style.display=“block”；
currentDisplay=“主页”；
}

提示：使用Jquery会让事情变得更简单。

@kougiland单击下一步时没有清除上一个值可能重复@kougiland的相同权限，但我需要在单击下一步时清除字段。它工作正常，正确无误，但当我单击手机时，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>