显示或隐藏<divs> with click a list of elements with pure JS

Question

如何创建 show/hidden 的 JS 脚本，反之亦然。在单击元素列表时根据它的状态（display:none 或 display:inline）切换 div？我正在为逻辑而苦苦挣扎...

这里是 fiddle 我试过 Fiddle.

document.addEventListener('DOMContentLoaded', function() {
  let panel = document.getElementsByClassName('panel');
  let menu = document.getElementsByTagName('li');
  console.log(menu, panel);

  //recorre los elementos <li> y coloca un eventlistner 'click'
  for (let i = 0; i < menu.length; i++) {
    menu[i].addEventListener('click', function() {
      //for(let j = 0; j < panel.length; j ++){
      panel[i].style.display == 'inline' ? panel[i].style.display = 'inline' : panel[i].style.display = 'none';
      //}
    });
  }
}, false);

#one {
  display: inline;
}

#two {
  display: none;
}

#three {
  display: none;
}

#four {
  display: none;
}

<ul>
  <li>ONE</li>
  <li>TWO</li>
  <li>THREE</li>
  <li>FOUR</li>
</ul>

<div class='panel' id='one'> ONE </div>
<div class='panel' id='two'> TWO </div>
<div class='panel' id='three'> THREE </div>
<div class='panel' id='four'> FOUR </div>

Answer 1

您的 panel display / hide 逻辑有误，我已更正，工作示例如下

document.addEventListener('DOMContentLoaded', function() {
  let panel = document.getElementsByClassName('panel');
  let menu = document.getElementsByTagName('li');

  for (let i = 0; i < menu.length; i++) {
    menu[i].addEventListener('click', function() {
      panel[i].style.display == 'inline' ? panel[i].style.display = 'none' : panel[i].style.display = 'inline';
    });
  }
}, false);

#one {
  display: inline;
}

#two {
  display: none;
}

#three {
  display: none;
}

#four {
  display: none;
}

<ul>
  <li>ONE</li>
  <li>TWO</li>
  <li>THREE</li>
  <li>FOUR</li>
</ul>

<div class='panel' id='one'> ONE </div>
<div class='panel' id='two'> TWO </div>
<div class='panel' id='three'> THREE </div>
<div class='panel' id='four'> FOUR </div>

Answer 2

您可以使用 onclick="MyFunction()" (w3schools) 从 li 元素获得点击。

<ul>
  <li onclick="handleClick(1)">Panel 1</li>
  <li onclick="handleClick(2)">Panel 2</li>
  <li onclick="handleClick(3)">Panel 3</li>
  <li onclick="handleClick(4)">Panel 4</li> 
</ul>

然后一个简单的处理函数来捕捉点击事件

var handleClick = function(index) {
  let panel = document.getElementsByClassName('panel');
  for (let i=0; i<panel.length; i++) {
    panel[i].style.display = (index - 1) == i ? 'inline' : 'none';
  }
};

看看我的作品fiddle。

你的 fiddle 中还有一个 div 结束标记错误。

   <div class="one panel" id="one">
     <div>
       PANEL #1
     </div>
   <div class="two panel" id="two">     
     <div>
       PANEL #2
     </div>
   </div>
   </div>

显示或隐藏<divs> with click a list of elements with pure JS

Show or hidden <divs> with click a list of elements with pure JS

javascript

toggle