Question

以下是用于创建点击方法的代码。我点击时收到错误，没有任何反应，我不知道出了什么问题。

<!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 {text-decoration: none;}
        a:hover {color: #000;}
        #header{height:20%;width: 100%;background-color: #B9F5BB;}
        .dis123{width:75%;float:left; height:80%;text-align: left; }
        .postleftmen{width:25%;float:left;color:#f0f0f0;}
        div.subcte456{text-align: inherit;line-height: 150%;font-size:20px}
        div .subcte456 a{display:inline-block;padding:2px 6px;background-color:#47a3da;color:white;border-radius:4px;margin:3px;cursor:default;}
    </style>
</head>
<body>
    <div id="header">
        Head
    </div>
    <div class="postleftmen">
        <ul class="cbp-vimenu">
            <li><a href="#" class="flaticon-number41" >&nbsp;&nbsp;select category</a></li>
            <li><a href="#" class="flaticon-smart" onClick="mob();
                    return false;">&nbsp;mobile</a></li>
            <li><a href="#" class="flaticon-pc6" onClick="ele();
                    return false;">&nbsp;electronics&nbsp;&&nbsp;computer</a></li>
            <li><a href="#" class="flaticon-car95" onClick="veh();
                    return false;">&nbsp;vehicle</a></li>
            <li><a href="#" class="flaticon-livingroom6" onClick="hme();
                    return false;">&nbsp;home&nbsp;&&nbsp;furniture</a></li>
            <li><a href="#" class="flaticon-dog37" onClick="pet();
                    return false;">&nbsp;pets</a></li>
            <li><a href="#" class="flaticon-cd" onClick="bok();
                    return false;">&nbsp;&nbsp;books,&nbsp;cd&nbsp;&&nbsp;hobbies</a></li>
            <li><a href="#" class="flaticon-black276" onClick="clo();
                    return false;">&nbsp;clothing&nbsp;&&nbsp;accessories</a></li>
            <li><a href="#" class="flaticon-baby23" onClick="kid();
                    return false;">&nbsp;kids&nbsp;&&nbsp;baby</a></li>
            <li><a href="#" class="flaticon-bicycle14" onClick="spo();
                    return false;">&nbsp;sport&nbsp;&&nbsp;health</a></li>
            <li><a href="#" class="flaticon-tools6" onClick="ser();
                    return false;">&nbsp;service</a></li>
            <li><a href="#" class="flaticon-businessman221" onClick="job();
                    return false;">&nbsp;jobs</a></li>
            <li><a href="#" class="flaticon-house111" onClick="est();
                    return false;">&nbsp;real&nbsp;estate</a></li>
        </ul>
    </div>
    <div class="dis123" style="text-transform: uppercase;">
        <div class="stepindi" style="width:400px;height:10px;">
            <p class="flaticon-number40" style="font-size:25px;">&nbsp;&nbsp;SELECT YOUR FORM TYPE</p>
        </div>
        <div class="subcte456" style="font-size: 15px;position:fixed;width:55%;height:30%;margin-top: 30px;margin-left: 150px;">
            <div id="mobi" style="display:none;z-index:99;" class="answer_list" >
                <p class="flaticon-right127"><a href="#">Mobile&nbsp;Phones</a>
                <p class="flaticon-right127"><a href="#">Tablets</a></p>
                <p class="flaticon-right127"><a href="#">Mobile&nbsp;Accessories</a></p></div>
            <div id="elec" style="display:none;z-index:99;" class="answer_list" >
                <p class="flaticon-right127"><a href="#">Cameras&nbsp;&&nbsp;Accessories</a></p>
                <p class="flaticon-right127"><a href="#">TV&nbsp;-&nbsp;Video&nbsp;-&nbsp;Audio</a></p>
                <p class="flaticon-right127"><a href="#">Computers&nbsp;-&nbsp;Laptops</a></p>
                <p class="flaticon-right127"><a href="#">Computer&nbsp;Accessories</a></p>
                <p class="flaticon-right127"><a href="#">Video Games&nbsp;-&nbsp;Consoles</a></p>
                <p class="flaticon-right127"><a href="#">Others&nbsp;Electronics</a></p></div>
            <div id="vehi" style="display:none;z-index:99;" class="answer_list" >
                <p class="flaticon-right127"><a href="#">Cars</a></p>
                <p class="flaticon-right127"><a href="#">Motorcycles&nbsp;-&nbsp;Scooters</a></p>
                <p class="flaticon-right127"><a href="#">Bicycles</a></p>
                <p class="flaticon-right127"><a href="#">Commercial&nbsp;-&nbsp;Transportation</a></p>
                <p class="flaticon-right127"><a href="#">Spare Parts&nbsp;-&nbsp;Accessories</a></p>
                <p class="flaticon-right127"><a href="#">Tractors&nbsp;-&nbsp;Agricultural&nbsp;Equipments </a></p></div>
            <div id="home" style="display:none;z-index:99;" class="answer_list" >
                <p class="flaticon-right127"><a href="#">Furniture</a></p>
                <p class="flaticon-right127"><a href="#">Decor&nbsp;&&nbsp;Furnishings</a></p>
                <p class="flaticon-right127"><a href="#">Fridge&nbsp;-&nbsp;AC&nbsp;-&nbsp;Washing Machine</a></p>
                <p class="flaticon-right127"><a href="#">Home&nbsp;&&nbsp;Kitchen Appliances</a></p>
                <p class="flaticon-right127"><a href="#">Art&nbsp;-&nbsp;Paintings</a></p>
                <p class="flaticon-right127"><a href="#">Other&nbsp;Household&nbsp;Goods</a></p></div>
            <div id="pets" style="display:none;z-index:99;" class="answer_list" >
                <p class="flaticon-right127"><a href="#">Animals</a></p>
                <p class="flaticon-right127"><a href="#">Pet&nbsp;Food&nbsp;-&nbsp;Accessories</a></p>
                <p class="flaticon-right127"><a href="#">Pet Care & Services</a></p></div>
            <div id="book" style="display:none;z-index:99;" class="answer_list" >
                <p class="flaticon-right127"><a href="#">Books&nbsp;&&nbsp;Magazines</a></p>
                <p class="flaticon-right127"><a href="#">CDs&nbsp;-&nbsp;DVDs</a></p>
                <p class="flaticon-right127"><a href="#">Musical&nbsp;Instruments</a></p>
                <p class="flaticon-right127"><a href="#">Coins&nbsp;&&nbsp;Collectibles</a></p>
                <p class="flaticon-right127"><a href="#">Handicrafts</a></p></div>
            <div id="clot" style="display:none;z-index:99;" class="answer_list" >
                <p class="flaticon-right127"><a href="#">Clothes</a></p>
                <p class="flaticon-right127"><a href="#">Jewellery</a></p>
                <p class="flaticon-right127"><a href="#">Bags&nbsp;&&nbsp;Luggage</a></p>
                <p class="flaticon-right127"><a href="#">Footwear</a></p>
                <p class="flaticon-right127"><a href="#">Clothing&nbsp;Accessories</a></p>
                <p class="flaticon-right127"><a href="#">Watches</a></p></div>
            <div id="kids" style="display:none;z-index:99;" class="answer_list" >
                <p class="flaticon-right127"><a href="#">Baby&nbsp;Products&nbsp;&&nbsp;Furniture</a></p>
                <p class="flaticon-right127"><a href="#">Kids&nbsp;Clothing&nbsp;-&nbsp;Accessories</a></p>
                <p class="flaticon-right127"><a href="#">Toys&nbsp;&&nbsp;Games</a></p>
                <p class="flaticon-right127"><a href="#">Kids&nbsp;Health&nbsp;-&nbsp;Nutrition</a></p></div>
            <div id="spor" style="display:none;z-index:99;" class="answer_list" >
                <p class="flaticon-right127"><a href="#">Sport&nbsp;Equipment</a></p>
                <p class="flaticon-right127"><a href="#">Gym&nbsp;&&nbsp;Fitness</a></p>
                <p class="flaticon-right127"><a href="#">Health & Beauty</a></p></div>
            <div id="serv" style="display:none;z-index:99;" class="answer_list" >
                <p class="flaticon-right127"><a href="#">Education&nbsp;&&nbsp;Classes</a></p>
                <p class="flaticon-right127"><a href="#">Electronics&nbsp;-&nbsp;Computers</a></p>
                <p class="flaticon-right127"><a href="#">Maids&nbsp;&&nbsp;Domestic&nbsp;Help</a></p>
                <p class="flaticon-right127"><a href="#">Health&nbsp;&&nbsp;Beauty</a></p>
                <p class="flaticon-right127"><a href="#">Home&nbsp;Improvements&nbsp;&&nbsp;Repairs</a></p>
                <p class="flaticon-right127"><a href="#">Movers&nbsp;&&nbsp;Packers</a></p>
                <p class="flaticon-right127"><a href="#">Drivers&nbsp;-&nbsp;Taxi&nbsp;Services</a></p>
                <p class="flaticon-right127"><a href="#">Car&nbsp;Wash&nbsp;&&nbsp;Repair</a></p>
                <p class="flaticon-right127"><a href="#">Other&nbsp;Services</a></p></div>
            <div id="jobs" style="display:none;z-index:99;" class="answer_list" >
                <p class="flaticon-right127"><a href="#">Job&nbsp;Offers</a></p>
                <p class="flaticon-right127"><a href="#">Resumes</a></p></div>
            <div id="real" style="display:none;z-index:99;" class="answer_list" >
                <p class="flaticon-right127"><a href="#">Houses&nbsp;-&nbsp;Apartments&nbsp;for&nbsp;Sale</a></p>
                <p class="flaticon-right127"><a href="#">Houses&nbsp;-&nbsp;Apartments&nbsp;for&nbsp;Rent</a></p>
                <p class="flaticon-right127"><a href="#">Land&nbsp;-&nbsp;Plots&nbsp;For&nbsp;Sale</a></p>
                <p class="flaticon-right127"><a href="#">Office&nbsp;–&nbsp;Commercial&nbsp;Space</a></p>
                <p class="flaticon-right127"><a href="#">PG&nbsp;&&nbsp;Roommates</a></p>
                <p class="flaticon-right127"><a href="#">Vacation&nbsp;Rentals&nbsp;–&nbsp;Guest&nbsp;Houses</a></p></div>
        </div></div>
    <div style="clear:both"> </div>
    <script>
        function mob() {
            hidemenus();
            document.getElementById('mobi').style.display = "block";
        }
        function ele() {
            hidemenus();
            document.getElementById('elec').style.display = "block";
        }
        function veh() {
            hidemenus();
            document.getElementById('vehi').style.display = "block";
        }
        function hme() {
            hidemenus();
            document.getElementById('home').style.display = "block";
        }
        function pet() {
            hidemenus();
            document.getElementById('pets').style.display = "block";
        }
        function bok() {
            hidemenus();
            document.getElementById('book').style.display = "block";
        }
        function clo() {
            hidemenus();
            document.getElementById('clot').style.display = "block";
        }
        function kid() {
            hidemenus();
            document.getElementById('kids').style.display = "block";
        }
        function spo() {
            hidemenus();
            document.getElementById('spor').style.display = "block";
        }
        function ser() {
            hidemenus();
            document.getElementById('serv').style.display = "block";
        }
        function job() {
            hidemenus();
            document.getElementById('jobs').style.display = "block";
        }
        function est() {
            hidemenus();
            document.getElementById('real').style.display = "block";
        }

        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";
            document.getElementById('pets').style.display = "none";
            document.getElementById('book').style.display = "none";
            document.getElementById('clot').style.display = "none";
            document.getElementById('kids').style.display = "none";
            document.getElementById('spor').style.display = "none";
            document.getElementById('serv').style.display = "none";
            document.getElementById('jobs').style.display = "none";
            document.getElementById('real').style.display = "none";
        }
    </script>
</body>

Answer 1

“不要重复自己。”

您不需要12个单独的功能来覆盖每个元素。这会重复代码并使得更难以排除故障（如您所见），并且难以维护。您必须为每个新项目类别添加新功能！

相反，您可以在循环中为每个菜单<li>标记添加事件侦听器。在这里，您还可以为<li>元素提供唯一ID或类。在HTML5中，您还可以添加自定义data-属性。

(function addEventListeners(){
    //Give the <ul> an ID instead of a class to target only those <li> elements.    
    var menuItems = document.getElementById("cbp-vimenu").getElementsByTagName("li");
    var len = menuItems.length;    
    for (var i=0; i < len; i++){
       menuItems[i].addEventListener("click", showMenu);
       menuItems[i].setAttribute("id", "menuItem" + i);
       menuItems[i].setAttribute("data-itemNum", i);  
    }
 })();

然后创建一个showMenu()函数，将点击的<li>与您要显示的div进行比较。你可以使用switch-case方法，或者如果list和div的顺序相同，你可以用数字匹配它们（例如：第3个菜单项 - ＆gt;第3个子菜单div）。任何一个选项都可以减少代码，从而减少重复性和重复性。更容易排除故障。

选项1，switch-case（JSFiddle）：

function showMenu(){
    hidemenus();
    var selectedItem = this.id;
    var divID;

    switch (selectedItem){
        case "menuItem1": 
            divID = "mobi"; 
            break;
        case "menuItem2": 
            divID = "elec";
            break;

        //add more cases here to account for other items

       default: return false;
    }

    document.getElementById(divID).style.display = "block";
};

选项2，匹配列表项和匹配元素数组中的div位置（JSFiddle）：

function showMenu(){
    hidemenus();
    var itemNum = this.getAttribute("data-itemNum");
    var menuDivs = document.getElementsByClassName("answer_list");
    menuDivs[itemNum].style.display = "block";
};

您可以通过定位hidemenus()属性来简化class="answer_list"功能：

function hidemenus() {
   var menusToHide =  document.getElementsByClassName("answer_list");
   var len = menusToHide.length; 
   for (var i = 0; i < len; i++){
        menusToHide[i].style.display = "none";
    }
};

顺便说一句，如果你所做的只是改变CSS，你不需要使用嵌套的<a>标签。您可以在任何元素上放置一个click事件侦听器，并使用CSS作为手形光标以指示它是可单击的。

li:hover{
    cursor: pointer;
    cursor: hand; /*outdated cross-browser option, but no harm including it*/
}

另外，尽量避免内联CSS和内联JavaScript（如onClick()） - 维护起来要困难得多。正如您所知，很难对此代码进行故障排除，如果您想要更改其功能，则需要在HTML中编辑20多个位置，在外部JS中编辑2个位置。

好的，最后一点注意事项 - 您的HTML缺少一些结束标记，</html>，“移动”部分中的结束</p>标记等。通过HTML验证程序运行它。

Answer 2

进行了一些编辑检查它现在可以正常工作

<!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 {text-decoration: none;}
    a:hover {color: #000;}
    #header{height:20%;width: 100%;background-color: #B9F5BB;}
    .dis123{width:75%;float:left; height:80%;text-align: left; }
    .postleftmen{width:25%;float:left;color:#f0f0f0;}
    div.subcte456{text-align: inherit;line-height: 150%;font-size:20px}
    div .subcte456 a{display:inline-block;padding:2px 6px;background-color:#47a3da;color:white;border-radius:4px;margin:3px;cursor:default;}
</style>
</head>
<body>
<div id="header">
    Head
</div>
<div class="postleftmen">
    <ul class="cbp-vimenu">
        <li><a href="#" class="flaticon-number41" >&nbsp;&nbsp;select category</a></li>
        <li><a href="#" class="flaticon-smart" onClick="mob();
                return false;">&nbsp;mobile</a></li>
        <li><a href="#" class="flaticon-pc6" onClick="ele();
                return false;">&nbsp;electronics&nbsp;&&nbsp;computer</a></li>
        <li><a href="#" class="flaticon-car95" onClick="veh();
                return false;">&nbsp;vehicle</a></li>
        <li><a href="#" class="flaticon-livingroom6" onClick="hme();
                return false;">&nbsp;home&nbsp;&&nbsp;furniture</a></li>
        <li><a href="#" class="flaticon-dog37" onClick="pet();
                return false;">&nbsp;pets</a></li>
        <li><a href="#" class="flaticon-cd" onClick="bok();
                return false;">&nbsp;&nbsp;books,&nbsp;cd&nbsp;&&nbsp;hobbies</a></li>
        <li><a href="#" class="flaticon-black276" onClick="clo();
                return false;">&nbsp;clothing&nbsp;&&nbsp;accessories</a></li>
        <li><a href="#" class="flaticon-baby23" onClick="kid();
                return false;">&nbsp;kids&nbsp;&&nbsp;baby</a></li>
        <li><a href="#" class="flaticon-bicycle14" onClick="spo();
                return false;">&nbsp;sport&nbsp;&&nbsp;health</a></li>
        <li><a href="#" class="flaticon-tools6" onClick="ser();
                return false;">&nbsp;service</a></li>
        <li><a href="#" class="flaticon-businessman221" onClick="job();
                return false;">&nbsp;jobs</a></li>
        <li><a href="#" class="flaticon-house111" onClick="est();
                return false;">&nbsp;real&nbsp;estate</a></li>
    </ul>
</div>
<div class="dis123" style="text-transform: uppercase;">
    <div class="stepindi" style="width:400px;height:10px;">
        <p class="flaticon-number40" style="font-size:25px;">&nbsp;&nbsp;SELECT YOUR FORM TYPE</p>
    </div>
    <div class="subcte456" style="font-size: 15px;position:fixed;width:55%;height:30%;margin-top: 30px;margin-left: 150px;">
        <div id="mobi" style="display:none;z-index:99;" class="answer_list" >
            <p class="flaticon-right127"><a href="#">Mobile&nbsp;Phones</a>
            <p class="flaticon-right127"><a href="#">Tablets</a></p>
            <p class="flaticon-right127"><a href="#">Mobile&nbsp;Accessories</a></p></div>
        <div id="elec" style="display:none;z-index:99;" class="answer_list" >
            <p class="flaticon-right127"><a href="#">Cameras&nbsp;&&nbsp;Accessories</a></p>
            <p class="flaticon-right127"><a href="#">TV&nbsp;-&nbsp;Video&nbsp;-&nbsp;Audio</a></p>
            <p class="flaticon-right127"><a href="#">Computers&nbsp;-&nbsp;Laptops</a></p>
            <p class="flaticon-right127"><a href="#">Computer&nbsp;Accessories</a></p>
            <p class="flaticon-right127"><a href="#">Video Games&nbsp;-&nbsp;Consoles</a></p>
            <p class="flaticon-right127"><a href="#">Others&nbsp;Electronics</a></p></div>
        <div id="vehi" style="display:none;z-index:99;" class="answer_list" >
            <p class="flaticon-right127"><a href="#">Cars</a></p>
            <p class="flaticon-right127"><a href="#">Motorcycles&nbsp;-&nbsp;Scooters</a></p>
            <p class="flaticon-right127"><a href="#">Bicycles</a></p>
            <p class="flaticon-right127"><a href="#">Commercial&nbsp;-&nbsp;Transportation</a></p>
            <p class="flaticon-right127"><a href="#">Spare Parts&nbsp;-&nbsp;Accessories</a></p>
            <p class="flaticon-right127"><a href="#">Tractors&nbsp;-&nbsp;Agricultural&nbsp;Equipments </a></p></div>
        <div id="home" style="display:none;z-index:99;" class="answer_list" >
            <p class="flaticon-right127"><a href="#">Furniture</a></p>
            <p class="flaticon-right127"><a href="#">Decor&nbsp;&&nbsp;Furnishings</a></p>
            <p class="flaticon-right127"><a href="#">Fridge&nbsp;-&nbsp;AC&nbsp;-&nbsp;Washing Machine</a></p>
            <p class="flaticon-right127"><a href="#">Home&nbsp;&&nbsp;Kitchen Appliances</a></p>
            <p class="flaticon-right127"><a href="#">Art&nbsp;-&nbsp;Paintings</a></p>
            <p class="flaticon-right127"><a href="#">Other&nbsp;Household&nbsp;Goods</a></p></div>
        <div id="pets" style="display:none;z-index:99;" class="answer_list" >
            <p class="flaticon-right127"><a href="#">Animals</a></p>
            <p class="flaticon-right127"><a href="#">Pet&nbsp;Food&nbsp;-&nbsp;Accessories</a></p>
            <p class="flaticon-right127"><a href="#">Pet Care & Services</a></p></div>
        <div id="book" style="display:none;z-index:99;" class="answer_list" >
            <p class="flaticon-right127"><a href="#">Books&nbsp;&&nbsp;Magazines</a></p>
            <p class="flaticon-right127"><a href="#">CDs&nbsp;-&nbsp;DVDs</a></p>
            <p class="flaticon-right127"><a href="#">Musical&nbsp;Instruments</a></p>
            <p class="flaticon-right127"><a href="#">Coins&nbsp;&&nbsp;Collectibles</a></p>
            <p class="flaticon-right127"><a href="#">Handicrafts</a></p></div>
        <div id="clot" style="display:none;z-index:99;" class="answer_list" >
            <p class="flaticon-right127"><a href="#">Clothes</a></p>
            <p class="flaticon-right127"><a href="#">Jewellery</a></p>
            <p class="flaticon-right127"><a href="#">Bags&nbsp;&&nbsp;Luggage</a></p>
            <p class="flaticon-right127"><a href="#">Footwear</a></p>
            <p class="flaticon-right127"><a href="#">Clothing&nbsp;Accessories</a></p>
            <p class="flaticon-right127"><a href="#">Watches</a></p></div>
        <div id="kids" style="display:none;z-index:99;" class="answer_list" >
            <p class="flaticon-right127"><a href="#">Baby&nbsp;Products&nbsp;&&nbsp;Furniture</a></p>
            <p class="flaticon-right127"><a href="#">Kids&nbsp;Clothing&nbsp;-&nbsp;Accessories</a></p>
            <p class="flaticon-right127"><a href="#">Toys&nbsp;&&nbsp;Games</a></p>
            <p class="flaticon-right127"><a href="#">Kids&nbsp;Health&nbsp;-&nbsp;Nutrition</a></p></div>
        <div id="spor" style="display:none;z-index:99;" class="answer_list" >
            <p class="flaticon-right127"><a href="#">Sport&nbsp;Equipment</a></p>
            <p class="flaticon-right127"><a href="#">Gym&nbsp;&&nbsp;Fitness</a></p>
            <p class="flaticon-right127"><a href="#">Health & Beauty</a></p></div>
        <div id="serv" style="display:none;z-index:99;" class="answer_list" >
            <p class="flaticon-right127"><a href="#">Education&nbsp;&&nbsp;Classes</a></p>
            <p class="flaticon-right127"><a href="#">Electronics&nbsp;-&nbsp;Computers</a></p>
            <p class="flaticon-right127"><a href="#">Maids&nbsp;&&nbsp;Domestic&nbsp;Help</a></p>
            <p class="flaticon-right127"><a href="#">Health&nbsp;&&nbsp;Beauty</a></p>
            <p class="flaticon-right127"><a href="#">Home&nbsp;Improvements&nbsp;&&nbsp;Repairs</a></p>
            <p class="flaticon-right127"><a href="#">Movers&nbsp;&&nbsp;Packers</a></p>
            <p class="flaticon-right127"><a href="#">Drivers&nbsp;-&nbsp;Taxi&nbsp;Services</a></p>
            <p class="flaticon-right127"><a href="#">Car&nbsp;Wash&nbsp;&&nbsp;Repair</a></p>
            <p class="flaticon-right127"><a href="#">Other&nbsp;Services</a></p></div>
        <div id="jobs" style="display:none;z-index:99;" class="answer_list" >
            <p class="flaticon-right127"><a href="#">Job&nbsp;Offers</a></p>
            <p class="flaticon-right127"><a href="#">Resumes</a></p></div>
        <div id="real" style="display:none;z-index:99;" class="answer_list" >
            <p class="flaticon-right127"><a href="#">Houses&nbsp;-&nbsp;Apartments&nbsp;for&nbsp;Sale</a></p>
            <p class="flaticon-right127"><a href="#">Houses&nbsp;-&nbsp;Apartments&nbsp;for&nbsp;Rent</a></p>
            <p class="flaticon-right127"><a href="#">Land&nbsp;-&nbsp;Plots&nbsp;For&nbsp;Sale</a></p>
            <p class="flaticon-right127"><a href="#">Office&nbsp;–&nbsp;Commercial&nbsp;Space</a></p>
            <p class="flaticon-right127"><a href="#">PG&nbsp;&&nbsp;Roommates</a></p>
            <p class="flaticon-right127"><a href="#">Vacation&nbsp;Rentals&nbsp;–&nbsp;Guest&nbsp;Houses</a></p></div>
    </div></div>
<div style="clear:both"> </div>
<script>
    function mob() {
        hidemenus();
        document.getElementById('mobi').style.display = "block";
    }
    function ele() {
        hidemenus();
        document.getElementById('elec').style.display = "block";
    }
    function veh() {
        hidemenus();
        document.getElementById('vehi').style.display = "block";
    }
    function hme() {
        hidemenus();
        document.getElementById('home').style.display = "block";
    }
    function pet() {
        hidemenus();
        document.getElementById('pets').style.display = "block";
    }
    function bok() {
        hidemenus();
        document.getElementById('book').style.display = "block";
    }
    function clo() {
        hidemenus();
        document.getElementById('clot').style.display = "block";
    }
    function kid() {
        hidemenus();
        document.getElementById('kids').style.display = "block";
    }
    function spo() {
        hidemenus();
        document.getElementById('spor').style.display = "block";
    }
    function ser() {
        hidemenus();
        document.getElementById('serv').style.display = "block";
    }
    function job() {
        hidemenus();
        document.getElementById('jobs').style.display = "block";
    }
    function est() {
        hidemenus();
        document.getElementById('real').style.display = "block";
    }

    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";
        document.getElementById('pets').style.display = "none";
        document.getElementById('book').style.display = "none";
        document.getElementById('clot').style.display = "none";
        document.getElementById('kids').style.display = "none";
        document.getElementById('spor').style.display = "none";
        document.getElementById('serv').style.display = "none";
        document.getElementById('jobs').style.display = "none";
        document.getElementById('real').style.display = "none";
    }
</script>

javascript html

onclick方法错误

2 个答案: