Framework7页面加载/刷新时tab-1无法显示的问题求助

Hey Mason, let's dig into why your home tab isn't showing up until you click the "Home" link—even though you've added the active classes correctly. Here are a couple of likely fixes:

1. Adjust Your Tab DOM Structure (Most Likely Culprit) #

Looking at your code, each tab panel is using .page-content.tab directly, which might be conflicting with Framework7's expected tab hierarchy. Framework7 expects .tab to be the container for the tab's content, with .page-content inside it (for scrollable content).

Here's the corrected structure for your tabs:

<div class="tabs">
  <!-- Tab 1 (Home) -->
  <div class="tab tab-active" id="tab-1">
    <div class="page-content">
      <div class="block">
        <span><b>Home</b></span>
        <p>...</p>
      </div>
    </div>
  </div>
  <!-- Tab 2 (Alerts) -->
  <div class="tab" id="tab-2">
    <div class="page-content">
      <div class="block">
        <span><b>Alerts</b></span>
        <p>...</p>
      </div>
    </div>
  </div>
  <!-- Repeat structure for Tab 3 and Tab 4 -->
</div>

By moving .page-content inside the .tab container, you align with Framework7's tab component standards, which should make the active tab render correctly on initial load.

2. Manually Trigger Tab Activation in Your Initialization Code #

If adjusting the structure doesn't solve it, you can explicitly tell Framework7 to show the home tab when your app initializes. Add this to your my-app.js file:

// Initialize Framework7 app
var app = new Framework7({
  // Your existing config options go here
  root: '#app', // Add id="app" to your top-level wrapper div if you don't have it already
});

// Ensure DOM is fully loaded before triggering tab
document.addEventListener('DOMContentLoaded', function() {
  // Force show the home tab
  app.tab.show('#tab-1');
});

This code explicitly activates the tab after the DOM is ready, bypassing any potential auto-initialization quirks.

Why This Happens #

Even though you added the tab-active and tab-link-active classes manually, Framework7's tab component relies on its internal initialization logic to properly render and activate tabs. When the DOM structure doesn't match what Framework7 expects, or if initialization runs before the DOM is fully ready, the active tab might not render until a user interaction (like clicking the tab link) triggers the component's logic.

Give these fixes a try—start with adjusting the DOM structure first, as that's the most common issue with this behavior!

内容的提问来源于stack exchange，提问作者Mason