Question

我在HTML DIV代码中添加了JavaScript onclick属性。

我在单个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";
}

多个JavaScript OnClick事件，在一个目标中具有多个值

1 个答案: