jQuery卡片切换Active类问题：页面加载无法默认激活对应元素

Hey there! Let's sort out that issue where your first .location-card and corresponding .dot don't get the active class when the page loads—even though the click-to-toggle logic works great.

The core problem is that you're only applying the active class on user interaction, but we need to add an initialization step to set that default state right when the DOM is ready. Here's how to implement this cleanly, depending on whether you're using vanilla JavaScript or jQuery:

Vanilla JavaScript Solution #

This approach ensures we target the first elements correctly and keep the click toggle logic consistent:

// Wait for the DOM to fully load before manipulating elements
document.addEventListener('DOMContentLoaded', function() {
  // Get all cards and dots to work with
  const locationCards = document.querySelectorAll('.location-card');
  const dots = document.querySelectorAll('.dot');

  // Initialize: Set the first card and corresponding dot as active
  if (locationCards.length > 0 && dots.length > 0) {
    locationCards[0].classList.add('active');
    dots[0].classList.add('active');
  }

  // Handle click events to toggle active state
  locationCards.forEach((card, index) => {
    card.addEventListener('click', function() {
      // Remove active class from all cards and dots first
      locationCards.forEach(card => card.classList.remove('active'));
      dots.forEach(dot => dot.classList.remove('active'));

      // Add active class to the clicked card and its matching dot
      this.classList.add('active');
      dots[index].classList.add('active');
    });
  });
});

Notes for Custom Matching #

If your .location-card and .dot elements are linked via a data attribute (like data-location-id) instead of index order, adjust the initialization step to match that relationship:

const firstCard = document.querySelector('.location-card');
if (firstCard) {
  const locationId = firstCard.dataset.locationId;
  const matchingDot = document.querySelector(`.dot[data-location-id="${locationId}"]`);
  
  firstCard.classList.add('active');
  if (matchingDot) matchingDot.classList.add('active');
}

jQuery Solution (If You're Using It) #

If your project uses jQuery, this shorter version will do the trick:

$(document).ready(function() {
  // Set default active state on first elements
  $('.location-card:first').addClass('active');
  $('.dot:first').addClass('active');

  // Click toggle logic
  $('.location-card').click(function() {
    $('.location-card, .dot').removeClass('active');
    $(this).addClass('active');
    $('.dot').eq($(this).index()).addClass('active');
  });
});

Just make sure your selectors match exactly with your DOM structure—if you run into issues double-check that .location-card and .dot are correctly targeting the elements you want.

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