Question

我想用三个不同的列表元素来控制三个不同的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

尝试一下，请参见注释以进行解释：

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 2

使用不含任何jQuery的纯JavaScript的工作代码：

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

Answer 4

您可以在li项的数据中添加目标div ID。

<ul>
    <li id="list1" data-target-id="div1">list 1</li>
    <li id="list2" data-target-id="div2">list 2</li>
    <li id="list3" data-target-id="div3">list 3</li>
</ul>

现在，默认情况下，我们将所有div隐藏起来

div {
      display: none;
   }

当某人单击li时，然后使用querySelectorAll隐藏所有div。
然后从li的data属性获取tergetId并显示该目标div。

var showHide = document.querySelector("ul");
    showHide.addEventListener("click", function (e){
        document.querySelectorAll('div').forEach(function(element) {
            element.style.display = "none";
        });

        var data = e.target.dataset;
        if(data){
            document.getElementById(data.targetId).style.display = "block";
        }
    });

希望这会对您有所帮助。

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

4 个答案: