价格列表切换功能技术问题问询：页面重载两次点击、初始激活样式异常及WordPress卡顿

Let's break down the issues with your price list component and fix them step by step, while cleaning up the redundant code for better performance and maintainability.

Problem 1: Double-Click Requirement & Incorrect Initial State #

Root Cause #

• Your original functions used a toggle logic (if display is none, show it; else hide it). When the page loads, the annualSection is already visible, so the first call to showAnnual() would hide it instead of keeping it visible—requiring a second click to re-show it.
• Even though you set custom styles for #annualButton in CSS, your functions override all button styles every time they run, resetting the Annual button's active state to inactive whenever any button is clicked.

Problem 2: Browser Lag in WordPress #

Root Cause #

• Redundant DOM queries: You’re calling document.getElementById() dozens of times across multiple functions, which forces the browser to repeatedly search the DOM for the same elements.
• Inline style modifications: Directly manipulating style.cssText for each button/section triggers frequent browser style recalculations, leading to layout thrashing and lag.

Solution: Refactored Code with Best Practices #

We’ll simplify the logic, use CSS classes for state management, and cut down on unnecessary DOM operations to resolve all issues.

1. Updated CSS #

We’ll create an .active class to handle button and section states, making styling consistent and easy to maintain:

.priceButton {
  padding: 10px 15px;
  margin: 20px;
  color: #FF6D00;
  border: solid 1px #FF6D00;
  cursor: pointer; /* Add cursor for better UX */
  background: transparent; /* Ensure button style consistency */
}

.priceButton.active {
  color: #003456;
  border-color: #003456;
}

.priceSection {
  padding: 100px;
  border: 2px solid black;
  display: none; /* Hide all sections by default */
}

.priceSection.active {
  display: block; /* Show only the active section */
}

.space {
  height: 90vh;
}

2. Simplified HTML #

Remove unnecessary <a> tags around buttons (we’ll handle scrolling via JS) and add data-target attributes to link buttons directly to their corresponding sections:

<div class="space">Blank space to test anchor tag</div>
<div id="priceButtonSection">
  <button class="priceButton" data-target="overnightSection">Overnight</button>
  <button class="priceButton" data-target="weeklySection">Weekly</button>
  <button class="priceButton" data-target="monthlySection">Monthly</button>
  <button class="priceButton" data-target="sixMonthlySection">6 monthly</button>
  <button class="priceButton active" data-target="annualSection">Annually</button>
</div>
<div id="overnightSection" class="priceSection">Overnight</div>
<div id="weeklySection" class="priceSection">Weekly</div>
<div id="monthlySection" class="priceSection">Monthly</div>
<div id="sixMonthlySection" class="priceSection">6 Monthly</div>
<div id="annualSection" class="priceSection active">Annual</div>

3. Cleaned-Up JavaScript #

Replace 5 repetitive functions with one reusable handler, and ensure the correct initial state loads on page load:

// Wait for the DOM to fully load before running code
document.addEventListener('DOMContentLoaded', function() {
  // Query elements once (instead of every click) for efficiency
  const buttons = document.querySelectorAll('.priceButton');
  const sections = document.querySelectorAll('.priceSection');
  const anchorTarget = document.getElementById('priceButtonSection');

  // Handle button clicks to toggle sections
  function togglePriceSection(event) {
    // Remove active state from all buttons and sections
    buttons.forEach(btn => btn.classList.remove('active'));
    sections.forEach(sec => sec.classList.remove('active'));

    // Activate the clicked button and its target section
    const targetId = event.target.dataset.target;
    event.target.classList.add('active');
    document.getElementById(targetId).classList.add('active');

    // Smooth scroll to the price section (replaces anchor tag behavior)
    anchorTarget.scrollIntoView({ behavior: 'smooth' });
  }

  // Attach click event to all buttons
  buttons.forEach(button => {
    button.addEventListener('click', togglePriceSection);
  });
});

Key Improvements Explained #

• Single Reusable Function: No more redundant code—one handler works for all buttons, using data-target attributes to link buttons to sections.
• CSS State Management: Using .active classes instead of inline styles reduces browser layout recalculations and makes styling easier to update.
• Fixed Initial State: We set the active class directly in the HTML for the Annual button and section, so the correct state loads immediately without JS interference.
• Efficient DOM Queries: We query elements once on page load instead of every click, cutting down on unnecessary browser work.
• Smooth Scrolling: Replaced <a> tags with scrollIntoView() for better control over scrolling behavior, avoiding unexpected anchor-related conflicts.

This should resolve the double-click issue, incorrect initial state, and browser lag in WordPress—while making your code far easier to maintain.

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