Question

我的标签无效。这是我从W3学校获得的代码

帮助我，我有点混淆

<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学校做所有的方法，但没有一个在我的最终。你能帮我解释一下我的错误吗？

Answer 1

JSFiddle中的JavaScript面板设置为运行＆＃34; onDomready＆＃34;，这通常没问题 - 但是因为您使用onclick属性在HTML中内联JS函数，并且该功能在JS中尚未存在，它的错误输出。检查您的浏览器控制台，您将看到。

所以它基本上是一个操作顺序问题。代码在Stack Overflow片段中运行良好，你可以在JSFiddle上设置JS加载类型为＆＃34;没有换行＆＃34;修复它。

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

＆＃13;

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";
}

＆＃13;

<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>

＆＃13;

Answer 2

这不是Jon Uleis' answer

所指出的错误

~~这是jsFiddle的错误，你的代码没有错。~~

它正在开发codepen.io：https://codepen.io/LucasPaganini/pen/XeKpZR

HTML

<!DOCTYPE html>
<html>
<body>

<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>


</body>
</html>

JS

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";
}

导航标签不起作用

2 个答案:

HTML

JS