Question

我只是从javascript开始，有点卡在w3schools标签中。我想创建一个选项卡-“所有”，显示所有选项卡的内容。如果不复制内容，我将无法解决。

function openCity(evt, cityName) {
  // Declare all variables
  var i, tabcontent, tablinks;

  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  // Show the current tab, and add an "active" class to the button that opened the tab
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

<div class="tab">

	  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
	  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
	  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
	</div>

<!-- Tab content -->
	<div id="London" class="tabcontent">
	  <h3>London</h3>
	  <p>London is the capital city of England.</p>
	</div>

	<div id="Paris" class="tabcontent">
	  <h3>Paris</h3>
	  <p>Paris is the capital of France.</p> 
	</div>

	<div id="Tokyo" class="tabcontent">
	  <h3>Tokyo</h3>
	  <p>Tokyo is the capital of Japan.</p>
	</div>

Answer 1

我认为这是您要完成的工作？您只需创建一个showAll函数即可设置初始值。

function openCity(evt, cityName) {
  // Declare all variables
  var i, tabcontent, tablinks;

  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  // Show the current tab, and add an "active" class to the button that opened the tab
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

function showAll(){
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "initial";
  }
}

<div class="tab">

	  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
	  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
	  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
    <button class="tablinks" onclick="showAll()">Show all</button>
	</div>

<!-- Tab content -->
	<div id="London" class="tabcontent">
	  <h3>London</h3>
	  <p>London is the capital city of England.</p>
	</div>

	<div id="Paris" class="tabcontent">
	  <h3>Paris</h3>
	  <p>Paris is the capital of France.</p> 
	</div>

	<div id="Tokyo" class="tabcontent">
	  <h3>Tokyo</h3>
	  <p>Tokyo is the capital of Japan.</p>
	</div>

Answer 2

制作一个数组并遍历所有对象，并在所有内容都变为块时使用。

XXX.XXX.XXX.XXX:55000

w3schools选项卡-所有选项卡

2 个答案: