Несколько JavaScript событий OnClick с несколькими значениями в одной цели

Question

Я добавил атрибут JavaScript onclick в тег HTML DIV.

Я использую несколько атрибутов onclick в одном теге DIV. Каждый 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"; 
}