javascript - 网页中的标签问题

Question

我使用 CSS 和 Javascript 在我的页面中有图像缩略图选项卡。当我加载我的页面时，它只显示选项卡而不显示相关选项卡中的内容。请找到下面的代码并帮助我。

Javascript:

<script>
    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 < tabcontent.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }

        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";
    }
</script>

Answer 1

我基本上在您的代码中看到了两个拼写错误...

它真的是吃，还是您打错了，应该是 evt？

function openCity(eat, cityName) {

基本上此时导致 tablinks 变量未被使用，这可能会破坏您的代码

tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tabcontent.length; i++) {

所以我更正了它，你能不能再试一次，因为这段代码是 LGTM

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

以防万一，如果您不需要支持 +IE8，您可以将其替换为 by map 方法 - http://caniuse.com/#feat=es5