javascript - CSS Javascript 选项卡 - 添加重复的选择器

Question

我有以下基于 https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_tabulators_active 处示例的代码

function openCity(evt, cityName) {
  var i, x, tablinks;
  x = document.getElementsByClassName("city");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < x.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " w3-red";
}

.w3-bar {
  width: 100%;
  overflow: hidden;
  display: inline-block;
}

.w3-black,
.w3-hover-black:hover {
  color: #fff!important;
  background-color: #000!important
}

.w3-bar .w3-bar-item {
  padding: 8px 16px;
  float: left;
  width: auto;
  border: none;
  outline: none;
  display: block
}

.w3-red,
.w3-hover-red:hover {
  color: #fff!important;
  background-color: #f44336!important
}

<div class="w3-bar w3-black">
  <button class="w3-bar-item w3-button tablink w3-red" onclick="openCity(event,'London')">London</button>
  <button class="w3-bar-item w3-button tablink" onclick="openCity(event,'Paris')">Paris</button>
  <button class="w3-bar-item w3-button tablink" onclick="openCity(event,'Tokyo')">Tokyo</button>
</div>

<div id="London" class="city">
  <h2>London</h2>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="city" style="display:none">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="city" style="display:none">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>


<div class="extrabar w3-bar w3-black">
  <button class="w3-bar-item w3-button tablink w3-red" onclick="openCity(event,'London')">London</button>
  <button class="w3-bar-item w3-button tablink" onclick="openCity(event,'Paris')">Paris</button>
  <button class="w3-bar-item w3-button tablink" onclick="openCity(event,'Tokyo')">Tokyo</button>
</div>

我添加了一个额外的按钮栏，它可以正确地选择选项卡，但我试图让它的行为与原始栏完全一样。

因此，如果在任一栏上选择东京，则 w3-red 突出显示状态将在两个栏上镜像。

我哪里错了？

Answer 1

第二个for循环错误。改成这样for (i = 0; i < tablinks.length; i++)而不是 for (i = 0; i < x.length; i++) city.length != tablink.length

更新镜像效果

function openCity(cityName) {
  document.querySelectorAll(".city").forEach(function(a) {
    a.style.display = "none";
  })
  document.getElementById(cityName).style.display = "block";
}

var city = ['London', 'Paris', 'Tokyo']

document.querySelectorAll(".tablink").forEach(function(a, b) {
a.addEventListener('click', function() {
  document.querySelectorAll(".tablink").forEach(function(a) {
    a.classList.remove('w3-red')
  })
    this.classList.add('w3-red')
    document.getElementsByClassName('tablink')[b<3? b+3:b].classList.add('w3-red')
    openCity(city[b%3]);
  })

})

.w3-bar {
  width: 100%;
  overflow: hidden;
  display: inline-block;
}

.w3-black,
.w3-hover-black:hover {
  color: #fff!important;
  background-color: #000!important
}

.w3-bar .w3-bar-item {
  padding: 8px 16px;
  float: left;
  width: auto;
  border: none;
  outline: none;
  display: block
}

.w3-red,
.w3-hover-red:hover {
  color: #fff!important;
  background-color: #f44336!important
}

<div class="w3-bar w3-black">
  <button class="w3-bar-item w3-button tablink w3-red">London</button>
  <button class="w3-bar-item w3-button tablink">Paris</button>
  <button class="w3-bar-item w3-button tablink">Tokyo</button>
</div>

<div id="London" class="city">
  <h2>London</h2>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="city" style="display:none">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="city" style="display:none">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>


<div class="extrabar w3-bar w3-black">
  <button class="w3-bar-item w3-button tablink w3-red">London</button>
  <button class="w3-bar-item w3-button tablink">Paris</button>
  <button class="w3-bar-item w3-button tablink">Tokyo</button>
</div>