Question

使用javascript在页面

中的自定义位置显示子菜单

错误是它不显示子菜单
我使用设计的表单在dis123 div标签
当我只尝试使用脚本代码时
当我尝试设计页面时，它确实工作了这里是完整的代码

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="#" class="">SELECT CATEGORY</a></p></li>
            <li><p name="answer" value="Show Div" onclick="mob()" ><a href="#" class="flaticon-smart">MOBILE&nbsp;&&nbsp;TABLET</a></p></li>
            <li><a href="#" class="flaticon-pc6">ELECTRONICS&nbsp;&&nbsp;COMPUTER</a></li>
            <li><a href="#" class="flaticon-car95">Vehicles</a></li>
            <li><a href="#" class="flaticon-livingroom6">Home&nbsp;&&nbsp;Furniture</a></li>
            <li><a href="#" class="flaticon-pets3">Pets</a></li>
            <li><a href="#" class="flaticon-cd">Books,&nbsp;CDs&nbsp;&&nbsp;Hobbies</a></li>
            <li><a href="#" class="flaticon-black276">Clothing&nbsp;&&nbsp;Accessories</a></li>
            <li><a href="#" class="flaticon-baby23">Kids&nbsp;&&nbsp;Baby</a></li>
            <li><a href="#" class="flaticon-bicycle14">Sports&nbsp;&&nbsp;Health</a></li>
            <li><a href="#" class="flaticon-tools6">Services</a></li>
            <li><a href="#" class="flaticon-businessman221">Jobs</a></li>
            <li><a href="#" class="flaticon-house111">Real&nbsp;Estate</a></li>
        </ul>
    </div>
    <div class="dis123">
        display<div id="mobi"  style="display:none;z-index:99;" class="answer_list" > <a href="main.php">mobile</a><br><a href="#">tablet</a></div>
    </div>
    <div style="clear:both"> </div>
    <div id="footer">
        Footer
    </div>
    <script>
function mob() {
        first();
        document.getElementById('mobi').style.display = "block";
    }
    function ele() {
        first();
        document.getElementById('elec').style.display = "block";
    }
    function veh() {
        first();
        document.getElementById('vehi').style.display = "block";
    }
    function hme() {
        first();
        document.getElementById('home').style.display = "block";
    }
    function pet() {
        first();
        document.getElementById('pets').style.display = "block";
    }
    function boo() {
        first();
        document.getElementById('book').style.display = "block";
    }

  function first(){
  document.getElementById('mobi').style.display = "none";
  document.getElementById('elec').style.display = "none";
  document.getElementById('vehi').style.display = "none";
  document.getElementById('home').style.display = "none";
  document.getElementById('pets').style.display = "none";
  document.getElementById('book').style.display = "none";
  }
  </script>
  </body>
  </html>

上面是用HTML，CSS，SCRIPT显示页面的完整代码，任何人都可以帮忙解决什么问题

我需要在里面显示以下内容

<div id="mobi"  style="display:none;" class="answer_list" > <a href="main.php">mobile</a></div>
<div id="elec"  style="display:none;" class="answer_list" > <a href="main.php">electric</a></div>
<div id="vehi"  style="display:none;" class="answer_list" > <a href="main.php">vehicles</a></div>
<div id="home"  style="display:none;" class="answer_list" > <a href="main.php">home</a></div>
<div id="pets"  style="display:none;" class="answer_list" > <a href="main.php">pets</a></div>
<div id="book"  style="display:none;" class="answer_list" > <a href="main.php">book</a></div>

Answer 1

Here is The Fiddle with your example

首先

onclick="mob()"

我建议这个

onclick="mob();"

并将你的脚本放在头上然后调用它

使用脚本在另一个div中显示子菜单

1 个答案: