Question

使用点击事件隐藏和显示 div

2018-07-14

1480

javascript html css

我想用三个不同的列表元素来控制三个不同的 div 元素，就像这样，单击 list1 将显示 div1 的内容，依此类推。

HTML

<ul>
    <li id="list1">list 1</li>
    <li id="list2">list 2</li>
    <li id="list3">list 3</li>
</ul>

<div id = "div1">
    <p>Text 1 goes there...</p>
</div>

<div id = "div2">
    <p>Text 2 goes there...</p>
</div>

<div id = "div3">
    <p>Text 3 goes there...</p>
</div>

CSS

div {
    display: none;
    }

Javascript

var showHide = document.querySelector("ul");
showHide.addEventListener("click", function (e){
    if (e.target.id === "list1"){
        document.getElementById("div1"). style.display="block";

    }

    if (e.target.id === "list2"){
        document.getElementById("div2"). style.display="block";
    }

    if (e.target.id === "list3"){
        document.getElementById("div3"). style.display="block";
    }
});

这种方法是可行的，但如果我单击另一个列表元素，它不会隐藏前一个列表元素，而是会一起显示。此外，如果您有 100 个列表和 100 个 div 需要处理，这种方法几乎不可能输入。注意：我不想使用 jQuery 或 CSS 目标元素和 HTML 锚文本。只使用纯 Javascript。

Answer 1

使用纯 javascript 运行代码，无需任何 jQuery：

var showHide = document.querySelector("ul");
showHide.addEventListener("click", function (e){

    const active = document.querySelector(".active");
    if(active)
    {
      active.style.display="none";
      active.className="";
    }
    if(e.target.id)
    {
      const list_id = e.target.id.replace( /^\D+/g, '');
      document.getElementById("div"+list_id).style.display="block";
      document.getElementById("div"+list_id).className="active";
    }
    
});

div{
display:none;
}

<ul>
    <li id="list1">list 1</li>
    <li id="list2">list 2</li>
    <li id="list3">list 3</li>
</ul>

<div id = "div1">
    <p>Text 1 goes there...</p>
</div>

<div id = "div2">
    <p>Text 2 goes there...</p>
</div>

<div id = "div3">
    <p>Text 3 goes there...</p>
</div>

Answer 2

试试这个，查看注释了解解释：

var showHide = document.querySelector("ul");
showHide.addEventListener("click", function (e){
    // Get all divs and hide everything
    var divs = document.querySelectorAll('div');
    // Iterate over the collection
    for(let div of divs){
        div.style.display="none"; // Set display to none
    }
    if (e.target.id === "list1"){
      document.getElementById("div1"). style.display="block";
    }

    if (e.target.id === "list2"){
        document.getElementById("div2"). style.display="block";
    }

    if (e.target.id === "list3"){
        document.getElementById("div3"). style.display="block";
    }
});

div {
    display: none;
 }

<ul>
    <li id="list1">list 1</li>
    <li id="list2">list 2</li>
    <li id="list3">list 3</li>
</ul>

<div id = "div1">
    <p>Text 1 goes there...</p>
</div>

<div id = "div2">
    <p>Text 2 goes there...</p>
</div>

<div id = "div3">
    <p>Text 3 goes there...</p>
</div>

注意： 获取所有 div 不是一个好主意， 太通用了 ，如果您在代码中添加任何其他 div，它们将被添加到您的集合中。更好的方法是，为您的 div 添加一个描述性类：

<div class="myCoolClass" id="div1">...</div>  
<div class="myCoolClass" id="div2">...</div>  
<div class="myCoolClass" id="div3">...</div>    

var divs = document.querySelectorAll('div.myCoolClass');

Answer 3

将您的逻辑提取到一个单独的函数中，然后使用 e.target 提取列表项的特定 id ，然后将其转换为您想要显示的 div 的 id 。

这样，您可以轻松处理 10、100 甚至 1000+ 个 li / div 对来隐藏和显示。

var showHide = document.querySelector("ul");
var divElements = document.querySelectorAll("div");

function showHideElement(element) {
  var itemId = element.id || "";
  var divId = itemId.replace("list", "div");
  
  divElements.forEach(function (element) { element.style.display = "none"; });
  document.getElementById(divId).style.display = "block";
}

showHide.addEventListener("click", function(e) {
  showHideElement(e.target);
});

div {
  display: none;
}

<ul>
  <li id="list1">list 1</li>
  <li id="list2">list 2</li>
  <li id="list3">list 3</li>
</ul>

<div id="div1">
  <p>Text 1 goes there...</p>
</div>

<div id="div2">
  <p>Text 2 goes there...</p>
</div>

<div id="div3">
  <p>Text 3 goes there...</p>
</div>