Question

我正在尝试构建一个页面，当您单击选项卡时内容会发生变化。我从w3school获得了基本代码，但是当页面加载时我无法打开第一个选项卡。请帮我找一下我做错了什么。我是javascript的初学者。

这是我正在使用的代码（它来自w3school的代码，它应该在页面加载时打开第一个标签页。）。我在外部文件中有脚本，并在标题部分中有脚本标记。

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">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>

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

  // Get the element with id="defaultOpen" and click on it
  document.getElementById("defaultOpen").click();

这是网站http://pt6-dev.info/donate-now/

任何帮助表示赞赏!! 佩吉

Answer 1

它没有用，因为你把JS放在头脑中，所以这句话：

document.getElementById("defaultOpen").click();

在创建DOM之前执行。

最简单的解决方案是将您的JS文件移到<body>标记的末尾。

Answer 2

用此代码替换您的Tab.js：）

当视图准备就绪时，您需要致电document.getElementById("defaultOpen").click();。

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



   window.onload = function(e){ 
      document.getElementById("defaultOpen").click();
   }    

  $(document).ready(function() {  //If you are using jquery then use this other wise you can use normal window.onload
     document.getElementById("defaultOpen").click();
  });

Answer 3

您可以在函数内部添加click函数并调用它。而不是

// Get the element with id="defaultOpen" and click on it
 document.getElementById("defaultOpen").click();

您可以将其添加到函数中以加载窗口

window.onload = function () {
                firstTab();
            };

        function firstTab() {
            document.getElementById("defaultOpen").click();

        }

Answer 4

在JavaScript的末尾添加以下代码行

window.onload=function(){
    openCity(event, 'London');
};

第一个标签不会在页面加载时自动打开

4 个答案: