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

【问题标题】：how to show content in div once a div is clicked on in Javascript?在 Javascript 中单击 div 后如何在 div 中显示内容？
【发布时间】：2018-06-09 06:05:41
【问题描述】：

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

【问题讨论】：

Show a div onclick and hide the image that triggered it的可能重复
感谢您的评论。但他们只写“目标”。我如何实际定位被点击的 div？

标签： javascript html function onclick

【解决方案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>

【讨论】：

感谢您的评论。但是在 if 条件下点击 div 的 ID 时如何实际定位呢？
这正是我想知道的！谢谢你的帮助！

【解决方案2】：

只是建议crack_iT对现有答案进行更清洁的切换方法

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;


    }
};

它更小，看起来更干净，更容易理解；

【讨论】：

【解决方案3】：

方法一：如下更新您的 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>

并更新您的功能如下：

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

方法 2：如果您想要函数中 div 的 id，请更新您的 HTML，如下所示：

    <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>

并更新您的功能如下：

    function loadContent(div) {
        var divid = div.id;
        document.getElementById('fish').style.display = divid == 'menu-fish' ? 'block' : "none";
        document.getElementById('dogs').style.display = divid == 'menu-dogs' ? 'block' : "none";
        document.getElementById('cats').style.display = divid == 'menu-cats' ? 'block' : "none";
    }

【讨论】：

在哪里定义了 loadDogsContent() 和 loadCatsContent() 方法？
编辑了我的答案。现在您不需要为每个 div 设置单独的函数。一个单一的功能可以工作。如果您还有其他问题，请参考编辑后的帖子和评论。

【解决方案4】：

您应该避免使用 if/else，因为管理 100 种内容类型的代码会出现问题。

使用document.querySelectorAll

/* Create only 1 function for all the content types - pass id as parameter */
function loadContent(id) {
  // Use querySelectorAll to all first level div's, to hide all
  document.querySelectorAll("div#content > div").forEach(el => el.style.display = "none");
 // Now, display the clicked content type
  document.getElementById(id).style.display = "block";
}

div#content > div {
  display: none;
}

<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="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>

【讨论】：