javascript - 一个目标中具有多个值的多个 JavaScript OnClick 事件

Question

我已将 JavaScript onclick 属性添加到 HTML DIV 标记。

我在单个 DIV 标记中使用多个 onclick 属性。每个 onclick 都包含各种标签。

我想要的是，当我单击一个 onclick 标签时，它应该在 DIV 标签中显示自己的标签。

当我单击另一个 onclick 标记时，它应该在同一标记中显示其标记，但应该清除以前的值。

HTML:

<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>
    <div id="main">
        <p name="answer" value="Show Div" onclick="mob()" >Mobile</p>
        <p name="answer" value="Show Div" onclick="ele()" >Electronics</p>
        <p name="answer" value="Show Div" onclick="veh()" >Vehicle</p>
        <p name="answer" value="Show Div" onclick="hme()" >Home &  Furniture</p>
        <p name="answer" value="Show Div" onclick="pet()" >Pets</p>
        <p name="answer" value="Show Div" onclick="boo()" >Books CD & Hobbies</p>
    </div>

JavaScript:

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";
}
function pet() {
    document.getElementById('pets').style.display = "block";
}
function boo() {
    document.getElementById('book').style.display = "block";
}

Answer 1

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";
}