Javascript 点击功能不适用于自动打开

Question

我正在编写一些代码，其中包括使用 HTML、CSS 和 Javascript 的选项卡，方法是使用按钮类。我希望在用户单击网站时自动打开一个特定的选项卡(按钮)。换句话说，我希望默认情况下打开选项卡，而无需用户单击任何内容。

function openPage(pageName, elmnt, color) {
          // Hide all elements with class="tabcontent" by default */
          var i, tabcontent, tablinks;
          tabcontent = document.getElementsByClassName("tabcontent");
          for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
          }
        
          // Remove the background color of all tablinks/buttons
          tablinks = document.getElementsByClassName("tablink");
          for (i = 0; i < tablinks.length; i++) {
            tablinks[i].style.backgroundColor = "";
          }
        
          // Show the specific tab content
          document.getElementById(pageName).style.display = "block";
        
          // Add the specific color to the button used to open the tab content
          elmnt.style.backgroundColor = color;
        }
        
        // Get the element with id="defaultOpen" and click on it
        document.getElementById("index").click(); 

    .tablink {
      float: left;
    
      margin-top: 28px;
      margin-left: 100px;
      padding: 5px font-size: 12px;
    
      cursor: pointer;
    
      color: black;
      border: none;
      outline: none;
      background-color: transparent;
    
      font-family: 'Open Sans Condensed', sans-serif;
      font-size: 15px;
    }
    
    .tablink:hover {
      text-decoration: underline;
    
      background-color: white;
    }
    
    /* Style the tab content (and add height:100% for full page content) */
    .tabcontent {
        display: none;
    
        height: 100%;
        padding: 20px 20px;
    
        color: black;
    }

 <button class="tablink" onclick="openPage('index', this, 'white')" id="indextab">INDEX</button>
  <button class="tablink" onclick="openPage('faq', this, 'white')">FAQ</button>
  <button class="tablink" onclick="openPage('other', this, 'white')">OTHER</button>
  <div id="faq" class="tabcontent">
    <h3>News</h3>
    <p>Some news this fine day!</p>
  </div>

  <div id="other" class="tabcontent">
    <h3>Contact</h3>
    <p>Get in touch, or swing by for a cup of coffee.</p>
  </div>
  <div id="index" class="tabcontent">
  <p>
  I should run first!
  </p>
  </div>

这是该问题的具体代码，但如果您想在不看代码的情况下查看实际工作，这里是它所在的位置 ( https://cheyennecodespreview.tumblr.com/ )。索引选项卡应该是默认打开的选项卡。

Answer 1

根据您在此处提到的内容，如果您想在页面加载时打开索引选项卡，您可以使用以下代码。

 document.addEventListener("DOMContentLoaded", function(event) {
  // - Code to execute when all DOM content is loaded.
  document.getElementById('indextab').click();
 });