Как показать содержимое в Div после нажатия на Div в Javascript? - PullRequest
Новая
       14

Как показать содержимое в Div после нажатия на Div в Javascript?

0 голосов
/ 09 июня 2018

Я хотел, чтобы содержимое 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>

Дело в том, как мне нацелить div, который нажимается в условии if?

Ответы [ 4 ]

0 голосов
/ 09 июня 2018

Просто предлагаю более чистый подход к существующему ответу 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;


    }
};

Это немного меньше, выглядит чище и проще для понимания;

0 голосов
/ 09 июня 2018

Подход 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 в функции, тообновите ваш 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";
    }
0 голосов
/ 09 июня 2018

Вам следует избегать использования if / else , так как это будет проблематичным кодом для управления сотнями типов контента.

Использование 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>
0 голосов
/ 09 июня 2018

Поскольку вы вызывали 3 различных метода в своем HTML-коде, вы должны написать 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>
...