一个目标中包含多个值的多个JavaScript OnClick事件

Multiple JavaScript OnClick events with multiple values in one target

本文关键字：JavaScript OnClick 事件 一个 目标 包含多      更新时间：2023-09-26

我为HTMLdiv标记添加了一个JavaScript onclick属性。

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

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

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

HTML:

<div id="mobi"  style="display:none;" class="answerswer_list" > <a href="main.php">mobile</a></div>
    <div id="elec"  style="display:none;" class="answerswer_list" > <a href="main.php">electric</a></div>
    <div id="vehi"  style="display:none;" class="answerswer_list" > <a href="main.php">vehicles</a></div>
    <div id="home"  style="display:none;" class="answerswer_list" > <a href="main.php">home</a></div>
    <div id="pets"  style="display:none;" class="answerswer_list" > <a href="main.php">pets</a></div>
    <div id="book"  style="display:none;" class="answerswer_list" > <a href="main.php">book</a></div>
    <div id="main">
        <p name="answerswer" value="Show Div" onclick="mob()" >Mobile</p>
        <p name="answerswer" value="Show Div" onclick="ele()" >Electronics</p>
        <p name="answerswer" value="Show Div" onclick="veh()" >Vehicle</p>
        <p name="answerswer" value="Show Div" onclick="hme()" >Home &  Furniture</p>
        <p name="answerswer" value="Show Div" onclick="pet()" >Pets</p>
        <p name="answerswer" 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";
}

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";
}
相关文章：