如何在页面加载时将Home标签页设置为默认项？

Got it, let's sort out how to make the Home tab your default active tab when the page finishes loading. First, let's break down the issue with your current code:

Your <ul> has an onload="openAction(event, 'All')" attribute, but <ul> elements don't support the onload event — that's only valid for elements like <body>, <img>, or <script>. Plus, you're targeting 'All' instead of the 'home' tab we want.

Here are a few solid solutions to get this working:

Solution 1: Use Body/Window Onload with Correct Parameter #

Move the load event to the <body> tag (or window) and call openAction with 'home' instead of 'All':

<body onload="openAction(null, 'home')">
  <ul class="tab">
    <li><a href="javascript:void(0)" class="tablinks" onclick="openAction(event, 'home')">Home</a></li>
    <li><a href="javascript:void(0)" class="tablinks" onclick="openAction(event, 'generate')">Generate QR</a></li>
    <li><a href="javascript:void(0)" class="tablinks" onclick="openAction(event, 'report')">Reports</a></li>
    <li>...</li>
  </ul>
  <!-- Your tab content blocks here -->
</body>

We pass null for the event parameter since we're triggering this programmatically (no actual click event to pass in). This will run openAction and activate the Home tab as soon as the page loads.

Solution 2: Modern DOMContentLoaded Event (No Inline Code) #

If you prefer keeping your JavaScript separate from HTML (best practice!), use the DOMContentLoaded event to trigger the Home tab once the DOM is ready:

document.addEventListener('DOMContentLoaded', function() {
  // Option 1: Simulate a click on the Home tab link
  const homeTab = document.querySelector('a.tablinks[onclick*="home"]');
  if (homeTab) homeTab.click();

  // Option 2: Call openAction directly (if you don't need the click visual trigger)
  // openAction(null, 'home');
});

This waits until all HTML is parsed before running, so you don't have to worry about elements not existing yet. Simulating a click will also apply any active styling your openAction function adds, just like a user clicking the tab.

Solution 3: Pre-Apply Active State in HTML #

If your openAction function adds an 'active' class to the selected tab and shows/hides content, you can set the default state directly in HTML:

<ul class="tab">
  <li><a href="javascript:void(0)" class="tablinks active" onclick="openAction(event, 'home')">Home</a></li>
  <li><a href="javascript:void(0)" class="tablinks" onclick="openAction(event, 'generate')">Generate QR</a></li>
  <li><a href="javascript:void(0)" class="tablinks" onclick="openAction(event, 'report')">Reports</a></li>
  <li>...</li>
</ul>

<!-- Make sure your Home content is visible by default -->
<div id="home" class="tabcontent" style="display: block;">
  Home tab content here
</div>
<div id="generate" class="tabcontent" style="display: none;">
  QR Generator content here
</div>
<div id="report" class="tabcontent" style="display: none;">
  Reports content here
</div>

Then you can still call openAction(null, 'home') on load to ensure your tab logic is fully initialized, but this gives you a visual fallback even if JavaScript is slow to load.

内容的提问来源于stack exchange，提问作者Calvin D.