javascript - 在Javascript中单击div后如何显示div中的内容？

Question

我想让一个 div 的内容在单击另一个 div 时显示。但我已经尝试过:

function loadFishContent() {
if (div is clicked) {
    document.getElementById('fish').style.display = "block";
    document.getElementById('dogs').style.display = "none";
    document.getElementById('cats').style.display = "none";
} 
};

我已经尝试过:

if (document.getElementByID('menu-fish') == true) {
//do action
}

但是该操作适用于我单击的所有 div。

我的 html 是:

<div id="menu-fish" onclick="loadFishContent()"> Fish </div>
<div id="menu-dogs" onclick="loadDogsContent()"> Dogs </div>
<div id="menu-cats" onclick="loadCatsContent()"> Cats </div>

 <div id="content">
            <div id="fish">
            <h2> Fish </h2>
            <img src="fish.jpg"/>
            <p> Information about fish in the store goes here.</p>
        </div>

        <div id="dogs">
            <h2> Dogs </h2>
            <img src="dog.jpg" />
            <p> Information about dogs in the store go here.</p>
        </div>

        <div id="cats">
            <h2> Cats </h2>
            <img src="cat.jpg" />
            <p> Information about cats in the store go here.</p>
        </div>
 </div>

问题是，如何定位在 if 条件下单击的 div？

Answer 1

当您在 html 代码中调用 3 个不同的方法时，您必须编写 3 个 javascript 函数。然后，您可以编写代码来显示和隐藏 div，而无需检查单击了哪个 div，因为每个 div 单击都有不同的方法可以调用。

如果您希望使用单个 js 方法来做到这一点

function loadContent(id) {
if (id=='fish') {
    document.getElementById('fish').style.display = "block";
    document.getElementById('dogs').style.display = "none";
    document.getElementById('cats').style.display = "none";
} 
else if (id=='dogs') {
    document.getElementById('fish').style.display = "none";
    document.getElementById('dogs').style.display = "block";
    document.getElementById('cats').style.display = "none";
} 
else if (id=='cats') {
    document.getElementById('fish').style.display = "none";
    document.getElementById('dogs').style.display = "none";
    document.getElementById('cats').style.display = "block";
} 
};

并在 html 中将其称为

<div id="menu-fish" onclick="loadContent('fish')"> Fish </div>
<div id="menu-dogs" onclick="loadContent('dogs')"> Dogs </div>
<div id="menu-cats" onclick="loadContent('cats')"> Cats </div>