完成 html 文件加载后按下按钮

Question

I'm quite new to javascript but I encountered the following problem:

I'm using datatables , which makes javascript tables out of normal html tables. That works great. Then I've split the different tables into tabs, as described here . This still works. But the problem is that I now need to press one of the tab buttons for them to become effective, otherwise all the tables that should be split into the different tabs, appear on top of each other.

Question: How can I make a function that presses a button, when loading of the single page html is complete? This would resolve my problem. Or maybe I need to ask the question differently? Why does in the javascript that is linked above that creates the tabs, initially select the first tab? The code again below. What could be the reason that when I use it in conjunction with datatables it no longer automatically selects the first tab?

function openCity(evt, cityName) {
  // Declare all variables
  var i, tabcontent, tablinks;

  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  // Show the current tab, and add an "active" class to the link that opened the tab
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

Answer 1

There appear to be a couple of items missing from the "how to" tutorial page which are present in the "try it" page.

1) HTML button ID:

Change this...

<button class="tablinks" onclick="openCity(event, 'London')">London</button>

...to this:

<button id="defaultOpen" class="tablinks" onclick="openCity(event, 'London')">London</button>

2) A $(document).ready(function() {...} action to select the button with this new ID:

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

In my case, I put this line in a <script>...</script> tag at the bottom of the HTML body.

Until I made these changes, I had the same issue that you report.

Hope that helps!