如何同时切换三类元素的is-active类？多入口轮播交互需求

Got it, let's tackle this carousel functionality step by step. Here's how you can implement the synchronized active state switching across your three sections, with the default hidden state and only active items visible:

1. HTML Structure (Consistent Indexing) #

First, make sure each section's items are linked via a matching index. Add a data-index attribute to your navigation dots to map them to the corresponding video and quote items:

<!-- Video Blocks -->
<div id="testimonials-item">
  <div class="video-item is-active" data-index="0">
    <!-- Your video content here -->
  </div>
  <div class="video-item" data-index="1">
    <!-- Your video content here -->
  </div>
  <div class="video-item" data-index="2">
    <!-- Your video content here -->
  </div>
</div>

<!-- Quote Text Blocks -->
<div id="testimonials-item-container">
  <div class="quote-item is-active" data-index="0">
    <!-- Your quote content here -->
  </div>
  <div class="quote-item" data-index="1">
    <!-- Your quote content here -->
  </div>
  <div class="quote-item" data-index="2">
    <!-- Your quote content here -->
  </div>
</div>

<!-- Navigation Dots -->
<div id="testimonials-nav">
  <span class="nav-dot is-active" data-index="0"></span>
  <span class="nav-dot" data-index="1"></span>
  <span class="nav-dot" data-index="2"></span>
</div>

2. CSS Styling #

Set all items to hidden by default, then only display those with the is-active class. Style your active navigation dot to show the orange highlight:

/* Hide all items by default */
#testimonials-item .video-item,
#testimonials-item-container .quote-item,
#testimonials-nav .nav-dot {
  display: none;
}

/* Show only active items */
#testimonials-item .is-active,
#testimonials-item-container .is-active,
#testimonials-nav .is-active {
  display: block;
}

/* Style navigation dots */
#testimonials-nav .nav-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #ccc;
  display: inline-block;
  margin: 0 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Active dot (orange) */
#testimonials-nav .is-active {
  background-color: #ff7d00; /* Adjust to your exact orange shade */
}

3. JavaScript Logic #

Add click listeners to each navigation dot. When a dot is clicked, we'll reset all active states, then apply the is-active class to the matching items in all three sections:

// Grab all relevant elements
const navDots = document.querySelectorAll('#testimonials-nav .nav-dot');
const videoItems = document.querySelectorAll('#testimonials-item .video-item');
const quoteItems = document.querySelectorAll('#testimonials-item-container .quote-item');

// Core function to switch active states
function setActive(index) {
  // Remove active class from all items
  navDots.forEach(dot => dot.classList.remove('is-active'));
  videoItems.forEach(item => item.classList.remove('is-active'));
  quoteItems.forEach(item => item.classList.remove('is-active'));

  // Add active class to the matching indexed items
  navDots[index].classList.add('is-active');
  videoItems[index].classList.add('is-active');
  quoteItems[index].classList.add('is-active');
}

// Attach click events to each navigation dot
navDots.forEach((dot, index) => {
  dot.addEventListener('click', () => {
    setActive(index);
  });
});

// Optional: Add auto-rotation if needed (uncomment below)
/*
let currentSlide = 0;
const slideInterval = setInterval(() => {
  currentSlide = (currentSlide + 1) % navDots.length;
  setActive(currentSlide);
}, 5000); // Rotate every 5 seconds
*/

Quick Tips: #

• Double-check that the data-index values match across all three sections—this is how the synchronization works.
• If your existing HTML uses different class names for items, just update the selectors in the CSS and JS to match.
• The optional auto-rotation code adds a hands-off carousel effect; tweak the interval time to fit your needs.

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