onclick 显示所有隐藏元素

Question

点击不同的字母，下面的代码显示了相应的元素。但是当有人点击 "All".

时，我很难显示所有元素

我怎样才能做到这一点？

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  if (evt) {
    evt.currentTarget.className += " active"
  } 
}

<a class="tablinks" onclick="openCity(event, 'All')">All</a>
<a class="tablinks" onclick="openCity(event, 'A')">A</a>
<a class="tablinks" onclick="openCity(event, 'B')">B</a>
<a class="tablinks" onclick="openCity(event, 'C')">C</a> &nbsp;
<div id="A" class="tabcontent">
  <h3>A</h3>
  <a href="">Abschreibung</a>
</div>
&nbsp;
<div id="B" class="tabcontent">
  <h3>B</h3>
  <a href="">Bauvorhaben</a>
</div>
<div id="C" class="tabcontent">
  <h3>C</h3>
</div>

Answer 1

document.getElementById(cityName).style.display = "block";

所以问题是当 "cityName" 参数是 "All" 时这一行出错了。因此，您只需要处理该场景，每当您在该变量中获得 "All" 时，您就可以显示所有元素。

我已修复以下代码段中的代码：

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  if (cityName != 'All') {
    document.getElementById(cityName).style.display = "block";
  } else {
    // Display all
    var elements = document.querySelectorAll(".tabcontent");
    for (var i = 0; i < elements.length; i++) {
      elements[i].style.display = "block";
    }
  }

  if (evt) {
    evt.currentTarget.className += " active"
  } else {
    document.getElementById("defaultOpen").className += " active"
  }
}

<a class="tablinks" id="defaultOpen" onclick="openCity(event, 'All')">All</a>
<a class="tablinks" onclick="openCity(event, 'A')">A</a>
<a class="tablinks" onclick="openCity(event, 'B')">B</a>
<a class="tablinks" onclick="openCity(event, 'C')">C</a> &nbsp;
<div id="A" class="tabcontent">
  <h3>A</h3>
  <a href="">Abschreibung</a>
</div>
&nbsp;
<div id="B" class="tabcontent">
  <h3>B</h3>
  <a href="">Bauvorhaben</a>
</div>
<div id="C" class="tabcontent">
  <h3>C</h3>
</div>

Answer 2

你必须检查参数是全部而不是其他任何东西的条件。如果是其他任何内容，则显示该 ID。添加了一个 switch 语句。循环每个 class 并在单击 "All" 时显示它们，否则添加默认选项并首先隐藏所有内容并显示单击的内容。

function openCity(evt, cityName) {
  Array.from(document.getElementsByClassName("tablinks")).forEach(ele => ele.classList.remove('active'))
  evt.target.classList.add('active')
  switch (cityName) {
    case "All":
      Array.from(document.getElementsByClassName("tabcontent")).forEach(ele => ele.style.display = 'block')
      break;
    default:
      Array.from(document.getElementsByClassName("tabcontent")).forEach(ele => ele.style.display = 'none');
      document.getElementById(cityName).style.display = 'block'
      break;
  }
}

.tabcontent {
  display: none;
}
.active {
  color:green;
}

<a class="tablinks" onclick="openCity(event, 'All')">All</a>
<a class="tablinks" onclick="openCity(event, 'A')">A</a>
<a class="tablinks" onclick="openCity(event, 'B')">B</a>
<a class="tablinks" onclick="openCity(event, 'C')">C</a> &nbsp;
<div id="A" class="tabcontent">
  <h3>A</h3>
  <a href="">Abschreibung</a>
</div>
&nbsp;
<div id="B" class="tabcontent">
  <h3>B</h3>
  <a href="">Bauvorhaben</a>
</div>
<div id="C" class="tabcontent">
  <h3>C</h3>
</div>

Answer 3

我会为所有内容使用一个单独的函数，并循环遍历选项卡内容 div 以显示所有内容：

function openAll() {
  // show all tab content divs
  var tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "block";
  }
  
  // add active class to all as they are all open
  var tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].classList.add("active");
  }
}

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].classList.remove("active");
  }
  document.getElementById(cityName).style.display = "block";
  if (evt) {
    evt.currentTarget.classList.add("active");
  } 
}

.tabcontent {
 display:none;
}

.active {
  color:green;
}

<a class="tablinks" onclick="openAll()">All</a>
<a class="tablinks" onclick="openCity(event, 'A')">A</a>
<a class="tablinks" onclick="openCity(event, 'B')">B</a>
<a class="tablinks" onclick="openCity(event, 'C')">C</a> &nbsp;
<div id="A" class="tabcontent">
  <h3>A</h3>
  <a href="">Abschreibung</a>
</div>
&nbsp;
<div id="B" class="tabcontent">
  <h3>B</h3>
  <a href="">Bauvorhaben</a>
</div>
<div id="C" class="tabcontent">
  <h3>C</h3>
</div>

我还会使用 .classList 正确添加和删除类（而不是附加然后替换它们）

onclick 显示所有隐藏元素

onclick show all hidden elements

javascript

show-hide