nav-tab默认未渲染需点击才显示问题咨询（附HTML代码）

Hey there, let's work through this nav-tab problem you're facing—where the default tab content doesn't show up until you click the tab itself. Based on your code snippet, it looks like you're using Bootstrap's tab component, so here are the most common fixes to get your content rendering on page load:

1. Make Sure Your Tab Content Container is Properly Configured #

The most frequent cause of this issue is missing the required classes on your tab content panes. You need a matching tab-content wrapper, and the pane corresponding to your active tab must have both show and active classes to display by default.

Here's how your full tab structure should look:

<!-- Your existing nav tabs -->
<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <a class="nav-item nav-link active" id="nav-text-tab" data-toggle="tab" href="#nav-text" role="tab" aria-controls="nav-text" aria-selected="true">
      Text <span class="badge badge-dark">@GetResultCount()</span>
    </a>
    <a class="nav-item nav-link" id="nav-images-tab" data-toggle="tab" href="#nav-images" role="tab" aria-controls="nav-images" aria-selected="false">
      Images
    </a>
  </div>
</nav>

<!-- Add this tab content section if you haven't already -->
<div class="tab-content" id="nav-tabContent">
  <!-- Default active pane needs show + active -->
  <div class="tab-pane fade show active" id="nav-text" role="tabpanel" aria-labelledby="nav-text-tab">
    <!-- Your Text tab content goes here -->
  </div>
  <div class="tab-pane fade" id="nav-images" role="tabpanel" aria-labelledby="nav-images-tab">
    <!-- Your Images tab content goes here -->
  </div>
</div>

Without the show active classes on the default pane, Bootstrap hides it by default, and only reveals it when you trigger the tab click event.

2. Verify Bootstrap Script Dependencies Are Loaded Correctly #

Bootstrap's tab component relies on JavaScript to handle state changes. Depending on your Bootstrap version:

• Bootstrap 4: Requires jQuery and Popper.js loaded before Bootstrap JS. Make sure your script tags are in this order:

  <script src="jquery.min.js"></script>
  <script src="popper.min.js"></script>
  <script src="bootstrap.min.js"></script>
  

• Bootstrap 5: Doesn't need jQuery, but you still need to load Bootstrap's JS file properly.

If scripts are loaded out of order or missing, the tab initialization won't happen automatically on page load.

3. Manually Initialize the Tab (If Auto-Initialization Fails) #

Sometimes DOM loading timing or script conflicts can prevent Bootstrap from auto-initializing the tab. You can force the default tab to activate with a bit of JavaScript:

// Wait for the DOM to fully load
document.addEventListener('DOMContentLoaded', function() {
  // Get the default active tab element
  const defaultTab = document.getElementById('nav-text-tab');
  // Initialize and show it
  new bootstrap.Tab(defaultTab).show();
});

This ensures the active tab's content is displayed right when the page is ready.

4. Check for Custom CSS/JS Interference #

Double-check your custom styles or scripts to make sure nothing is overriding Bootstrap's default tab behavior:

• Use your browser's dev tools (F12) to inspect the default tab pane. Look at the computed styles—if display: none is being forced (e.g., with !important), that's a problem.
• Make sure no custom JavaScript is hiding the tab content on page load.

Start with the first fix (checking the tab content classes)—that's the solution for most cases like this. If that doesn't work, work through the other steps one by one.

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