按钮组单选实现求助：点击切换active类失效问题

Hey there! Let's dig into why your active class isn't switching correctly when you click the tab buttons. Your jQuery code looks logically sound, so the issue is likely coming from a conflict or timing problem. Here's what to check and fix:

1. Check for Event Conflicts with the openCity Function #

Each of your buttons has an inline onclick="openCity(...)" handler. If this function includes code that modifies the active class (for example, re-adding it to the default button), it will override your jQuery logic.

First, look into the openCity function's code. If it's manually setting the active class on the default button or interfering with your tab state, you'll need to adjust it to work with your jQuery code—either remove the class manipulation from openCity or integrate the active class switching directly into it.

2. Ensure Your jQuery Code Runs After the DOM is Loaded #

If your jQuery code runs before the tab buttons are rendered in the DOM, the click event won't bind properly. Wrap your code in $(document).ready() to make sure it executes only after the page is fully loaded:

$(document).ready(function() {
  // Set default active state on the first tab
  $('#defaultOpen').addClass('active');

  $('.tablink').click(function(e) {
    // Remove active class from all tabs
    $('.tablink').removeClass('active');
    // Add active class to the clicked tab
    $(this).addClass('active');
  });
});

3. Avoid Inline Event Handlers (Cleaner Approach) #

Inline onclick handlers can create conflicts and make code harder to maintain. Instead, move the openCity parameters into HTML data-* attributes and bind everything via jQuery:

Updated HTML: #

<button class="tablink" data-city="News" data-color="#0c0c0c" id="defaultOpen">
  <strong>News</strong>
</button>
<button class="tablink" data-city="Story" data-color="#0c0c0c">
  <strong>Events</strong>
</button>
<button class="tablink" data-city="Guides" data-color="#0c0c0c">
  <strong>Guides</strong>
</button>

Updated jQuery: #

$(document).ready(function() {
  $('#defaultOpen').addClass('active');

  $('.tablink').click(function(e) {
    // Update active class state
    $('.tablink').removeClass('active');
    $(this).addClass('active');

    // Get parameters from data attributes and call openCity
    const cityName = $(this).data('city');
    const color = $(this).data('color');
    openCity(cityName, this, color);
  });
});

This approach eliminates inline event conflicts and keeps your logic centralized, making it easier to debug and maintain.

Quick Final Checks #

Double-check that:

• The active class in your CSS is targeting the correct styles (e.g., background color, text color)
• jQuery is properly loaded on your page (no console errors related to $ being undefined)

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