Question

我希望你能帮助我。我尝试了一个tabwitch，但是我遇到了一些问题。我想使用代码。我如何在同一个tablink中使用多个tabcontent？对于我的样本，我添加了第二个“东京”ID。（我知道我使用2个相同的ID）现在我想在openCity Tokyo下将其显示为第二个选项。

第二个问题是，在开始时我看到所有选项卡都没有css。但我只希望看到巴黎作为样本。

我希望你能帮助我:)。

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";
    evt.currentTarget.className += " active";
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p>Click on the buttons inside the tabbed menu:</p>

<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>

<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>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

     
</body>
</html>

Answer 1

您可以使用解决方案https://jsfiddle.net/dc5p38ed/

openCity = function(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", "");
    }
    for(var j=0; j<document.getElementsByClassName(cityName).length; j++){
    	document.getElementsByClassName(cityName)[j].style.display = "block";
    }
    evt.currentTarget.className += " active";
}

<p>Click on the buttons inside the tabbed menu:</p>

<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>

<div class="tabcontent London">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div class="tabcontent Paris">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div class="tabcontent Tokyo">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

<div class="tabcontent Tokyo">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

Answer 2

id必须是唯一的，如果您想要多个相同的ID，请使用{/ 3}}

var allIds= document.querySelectorAll('#'+cityName);
allIds[allIds.length-1].style.display = "block"; // for the last id to be shown

要激活巴黎，请向active添加课程Paris并手动触发点击事件，例如

document.querySelector('.tablinks.active').click();

<强>代码段，

＆＃13;

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", "");
  }
  var allIds = document.querySelectorAll('#' + cityName);
  allIds[allIds.length - 1].style.display = "block";
  evt.currentTarget.className += " active";
}

document.querySelector('.tablinks.active').click();

＆＃13;

<p>Click on the buttons inside the tabbed menu:</p>

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks active" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<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>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan Second.</p>
</div>

＆＃13;

多个标签交换机

2 个答案: