在Javascript中单击div后，如何在div中显示内容？

我想让一个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？

当您在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>

鱼
狗
猫
方法1:
更新您的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>

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

方法2：
如果需要函数中div的id，请更新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>

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

您应该避免使用if/else，因为使用100种内容类型进行管理会产生问题

使用


/*仅为所有内容类型创建一个函数-将id作为参数传递*/
函数loadContent（id）{
//对所有一级div使用querySelectorAll，以隐藏所有
document.queryselectoral（“div#content>div”）.forEach（el=>el.style.display=“无”）；
//现在，显示单击的内容类型
document.getElementById（id）.style.display=“block”；
}
div#content>div{
显示：无；
}
鱼
狗
猫
鱼关于商店里鱼的信息在这里

狗商店里关于狗的信息可以在这里找到

猫商店里关于猫的信息可以在这里找到

只是建议通过破解现有答案来采用更干净的切换方法

function loadContent(id) {
    document.getElementById('dogs').style.display = "none";
    document.getElementById('cats').style.display = "none";
    document.getElementById('fish').style.display = "none";
    switch (id){
      case 'fish':  document.getElementById('fish').style.display = "block";
                    break;
      case 'cats':  document.getElementById('cats').style.display = "block";
                    break;
      case 'dogs':  document.getElementById('dogs').style.display = "block";
                    break;


    }
};

它更小，看起来更干净，更容易理解
 可能的副本谢谢你的评论。但他们只写“目标”。我该如何定位被点击的div？谢谢你的评论。但是，当在if条件下单击div时，我实际上如何定位它的ID呢？这正是我想知道的！谢谢你的帮助！定义loadDogsContent（）和loadCatsContent（）的方法在哪里？编辑了我的答案。现在，您不需要为每个div使用单独的函数。一个函数可以工作。请参考编辑后的文章和评论，如果你有进一步的担心。