2

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

4

4 回答 4

3

当您在 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>
于 2018-06-09T06:11:33.880 回答
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;


    }
};

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

于 2018-06-09T14:14:29.003 回答
0

您应该避免使用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>

于 2018-06-09T06:24:01.577 回答
0

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

并更新您的功能如下：

    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";
    }
于 2018-06-09T06:15:37.733 回答