javascript - 导航标签不起作用

Question

我的选项卡不工作。这是我从 W3 学校获得的代码

https://jsfiddle.net/mobi35/uwLp87ye/

帮帮我，我有点糊涂

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

 <div id="London" class="city">
   <h2>London</h2>
   <p>London is the capital 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>


 function openCity(cityName) {
   var i;
   var x = document.getElementsByClassName("city");
   for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
   }
   document.getElementById(cityName).style.display = "block";
 }

我试过 W3 Schools 中的所有方法，但没有一个对我有效。你们能帮我解释一下我的错误吗？

Answer 1

您的 JSFiddle 中的 JavaScript 面板设置为运行“onDomready”，这通常没问题 - 但是因为您使用 onclick 属性在 HTML 中内联绑定(bind) JS 函数，并且该函数没有在 JS 中还不存在，它正在出错。检查您的浏览器控制台，您会看到。

所以这本质上是一个操作顺序问题。该代码在 Stack Overflow 片段中运行良好，您也可以将 JSFiddle 上的 JS 加载类型设置为“不换行”以修复它。

在未来，您应该学习如何在 JavaScript 中绑定(bind) click 事件处理程序，而不是内联 HTML。

function openCity(cityName) {
  var i;
  var x = document.getElementsByClassName("city");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  document.getElementById(cityName).style.display = "block";
}

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

<div id="London" class="city">
  <h2>London</h2>
  <p>London is the capital 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>