How to solve not changing page when activate a tab in sidebar

I am new to HTML and JS and have this dashboard with a sidebar but I could not change the page when I click on next tab, for example it shows empty page when I click on analytics. Please help me so I can add my charts in analytics tab and other tabs.
I use chart js for charts and have styles.css file

// Function to change content
function changeContent(tabName) {
  // Hide all tab contents
  var tabPanes = document.querySelectorAll('.tab-pane');
  tabPanes.forEach(pane => {
    pane.classList.remove('active');
    pane.style.display = 'none';
  });

  // Show the clicked tab
  var activePane = document.getElementById(tabName);
  if (activePane) {
    activePane.classList.add('active');
    activePane.style.display = 'block';

    // If it's the analytics tab and it's empty, load the content
    if (tabName === 'analytics' && activePane.innerHTML.trim() === '') {
      loadAnalyticsContent();
    }
  }

  // Remove active class from all buttons
  var tabButtons = document.querySelectorAll('.tab-button');
  tabButtons.forEach(button => button.classList.remove('active'));

  // Add active class to the clicked button
  var activeButton = document.querySelector(`.tab-button[data-tab="${tabName}"]`);
  if (activeButton) {
    activeButton.classList.add('active');
  }
}

// Tab functionality
const tabButtons = document.querySelectorAll('.sidebar a');

tabButtons.forEach(button => {
  button.addEventListener('click', function(e) {
    e.preventDefault();
    const tabId = this.getAttribute('data-tab');
    if (tabId) {
      changeContent(tabId);
    }
  });
});

<main>
  <div id="dashboard" class="tab-pane active">
    <h1>Dashboard</h1>
    <div class="analyse">
      <div class="sales">
        <div class="status">
          <div class="info">
            <h3>Total Sales</h3>
            <h1>$65,024</h1>
          </div>
          <div class="progresss">
            <svg>
                                <circle cx="38" cy="38" r="36"></circle>
                            </svg>
            <div class="percentage">
              <p>+81%</p>
            </div>
          </div>
        </div>
      </div>
      <div id="users" class="tab-pane">
        <h1>Users</h1>
        <!-- Users content -->
      </div>
      <div id="history" class="tab-pane">
        <h1>History</h1>
        <!-- History content -->
      </div>
      <div id="analytics" class="tab-pane">
        <h2>Analytics Dashboard</h2>
        <div id="date-range-picker">
          <input type="date" id="start-date">
          <input type="date" id="end-date">
          <button id="apply-date-range">Apply</button>
        </div>
        <div class="chart-container">
          <canvas id="user-activity-chart"></canvas>
        </div>
        <div class="chart-container">
          <canvas id="revenue-chart"></canvas>
        </div>
      </div>
</main>