如何在HTML仪表板首页打开时显示空视图？

Got it, let's adjust your code so the dashboard shows an empty view instead of auto-displaying project details when first opened. Here's how to do it step by step:

1. Remove Default Active State from Sidebar Projects #

First, your current sidebar has a nav-link marked as active (I see the truncated acti... in your code), which triggers the default project detail display. Remove that active class from all sidebar links so no project is selected initially.

Modified sidebar snippet:

<nav class="col-md-2 d-none d-md-block bg-light sidebar">
  <div id="projectlist" class="sidebar-sticky">
    <ul class="nav flex-column nav-pills">
      <li class="nav-item">
        <a name="EventDrivenLLC" class="nav-link" href="#EventDrivenLLC">EventDrivenLLC</a>
      </li>
      <!-- Repeat for other project links, ensuring none have the `active` class -->
    </ul>
  </div>
</nav>

2. Add Empty View & Toggle Logic for Project Details #

Next, update your main content area to include an empty view that's visible by default, while hiding the project details section until a project is selected.

Full container snippet with logic:

<div class="container-fluid">
  <div class="row">
    <!-- Sidebar (modified as above) -->
    <nav class="col-md-2 d-none d-md-block bg-light sidebar">
      <div id="projectlist" class="sidebar-sticky">
        <ul class="nav flex-column nav-pills">
          <li class="nav-item">
            <a name="EventDrivenLLC" class="nav-link" href="#EventDrivenLLC" data-project="EventDrivenLLC">EventDrivenLLC</a>
          </li>
          <li class="nav-item">
            <a name="AnotherProject" class="nav-link" href="#AnotherProject" data-project="AnotherProject">AnotherProject</a>
          </li>
        </ul>
      </div>
    </nav>

    <!-- Main Content -->
    <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
      <!-- Empty View (visible by default) -->
      <div id="emptyView" class="d-flex align-items-center justify-content-center h-100">
        <p class="text-muted">Select a project from the sidebar to view details</p>
      </div>

      <!-- Project Details (hidden by default) -->
      <div id="projectDetails" class="d-none">
        <!-- Your existing project detail content goes here -->
        <h1 id="selectedProjectName"></h1>
        <!-- Rest of the project details -->
      </div>
    </main>
  </div>
</div>

<script>
// Get elements
const sidebarLinks = document.querySelectorAll('.nav-link');
const emptyView = document.getElementById('emptyView');
const projectDetails = document.getElementById('projectDetails');
const selectedProjectName = document.getElementById('selectedProjectName');

// Add click event to sidebar links
sidebarLinks.forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    
    // Remove active class from all links
    sidebarLinks.forEach(l => l.classList.remove('active'));
    // Add active class to clicked link
    link.classList.add('active');
    
    // Show project details, hide empty view
    emptyView.classList.add('d-none');
    projectDetails.classList.remove('d-none');
    
    // Update selected project name (or load your project data here)
    const projectName = link.dataset.project;
    selectedProjectName.textContent = projectName;
    
    // Add your logic to load the corresponding project details here
  });
});
</script>

Key Changes Explained #

• No Default Active Link: Ensures no project is pre-selected on page load.
• Empty View: Uses Bootstrap's d-flex and d-none classes to show a friendly message by default.
• Toggle Logic: JavaScript handles showing/hiding the empty view and project details when a sidebar link is clicked, plus managing the active state of links.

This setup will make your dashboard start with the empty view, and only display project details once the user selects a project from the sidebar.

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