如何实现可点击Div标题在小屏幕下响应式重排并关联内容

Absolutely you can implement this responsive tab-to-accordion pattern—it’s a common and user-friendly solution for adapting content across screen sizes! Let’s break down how to do it, plus look at potential pitfalls in your current setup.

1. Refine Your HTML Structure (Optional but Recommended) #

Your existing structure works, but wrapping each tab and its corresponding content in a container makes responsive layout control much cleaner. It also strengthens the link between tabs and their content:

<div class="tab-group">
  <div class="tabBox-3" data-target="div1">Tab 1</div>
  <div class="divText" id="div1">
    <h1>Tab 1 content</h1>
    <p>Tab 1 content text</p>
  </div>
</div>
<div class="tab-group">
  <div class="tabBox-3" data-target="div2">Tab 2</div>
  <div class="divText" id="div2">
    <h1>Tab 2 content</h1>
    <p>Tab 2 content text</p>
  </div>
</div>
<div class="tab-group">
  <div class="tabBox-3" data-target="div3">Tab 3</div>
  <div class="divText" id="div3">
    <h1>Tab 3 content</h1>
    <p>Tab 3 content text</p>
  </div>
</div>

Using a data-target attribute to link tabs to content is more flexible than hardcoding IDs directly in your JavaScript.

2. Use CSS Media Queries to Switch Layouts #

The core of this solution is using media queries to adjust the layout based on screen width:

• Desktop (wide screens): Tabs sit side-by-side, and content appears in a single container below.
• Mobile (narrow screens): Each tab sits directly above its content, acting like an accordion toggle.

Here’s a sample CSS implementation:

/* Base styles for desktop */
.tabBox-3 {
  display: inline-block;
  padding: 10px 20px;
  background-color: #f0f0f0;
  cursor: pointer;
  margin-right: 8px;
  border-radius: 4px 4px 0 0;
}
.divText {
  display: none;
  padding: 20px;
  border: 1px solid #f0f0f0;
  border-radius: 0 4px 4px 4px;
}
.divText.active {
  display: block;
}

/* Mobile responsive styles */
@media (max-width: 768px) {
  .tab-group {
    margin-bottom: 16px;
    border-bottom: 1px solid #eee;
  }
  .tabBox-3 {
    display: block;
    margin-right: 0;
    border-radius: 4px;
    border-bottom: 1px solid #ddd;
  }
  .divText {
    border-radius: 0 0 4px 4px;
    border-top: none;
  }
}

3. Adapt JavaScript for Cross-Screen Interaction #

You’ll need to adjust your click logic to behave differently on mobile vs. desktop:

• Desktop: Clicking a tab hides all content and shows only the selected tab’s content.
• Mobile: Clicking a tab toggles the visibility of its own content (no need to close other tabs, though you can adjust this if needed).

Add this JavaScript to handle the interaction:

const tabButtons = document.querySelectorAll('.tabBox-3');
const contentDivs = document.querySelectorAll('.divText');

// Initialize: Show the first tab's content
contentDivs[0].classList.add('active');

tabButtons.forEach(button => {
  button.addEventListener('click', () => {
    const targetId = button.getAttribute('data-target');
    const targetContent = document.getElementById(targetId);
    const isMobile = window.innerWidth <= 768;

    if (isMobile) {
      // Mobile: Toggle the current tab's content
      targetContent.classList.toggle('active');
    } else {
      // Desktop: Hide all content, show the selected tab's content
      contentDivs.forEach(div => div.classList.remove('active'));
      targetContent.classList.add('active');
    }
  });
});

// Handle window resizing to preserve state
window.addEventListener('resize', () => {
  const isMobile = window.innerWidth <= 768;
  if (!isMobile) {
    // On desktop, ensure only one content block is visible
    const activeDivs = document.querySelectorAll('.divText.active');
    if (activeDivs.length > 1) {
      activeDivs.forEach((div, index) => {
        if (index !== 0) div.classList.remove('active');
      });
    }
  }
});

1. Weak Content-Tab Association: Your original flat structure doesn’t group tabs with their content, making it harder to maintain and more error-prone when updating IDs.
2. Unplanned Mobile Interaction: Without adjusting the JS, clicking a tab on mobile might hide other content blocks, which isn’t the expected accordion behavior.
3. No State Preservation: Resizing the window could cause the active tab state to break (e.g., multiple content blocks showing on desktop).
4. Accessibility Gaps: Using plain <div> elements without semantic ARIA attributes (like role="tab" or role="tabpanel") makes the component unreadable for screen reader users.

• Add ARIA Attributes: Improve accessibility by adding roles like role="tab" to buttons, aria-controls to link tabs to content, and role="tabpanel" to content blocks.
• Keyboard Navigation: Allow users to switch tabs with the Tab key and activate them with Enter/Space for better accessibility.
• Smooth Transitions: Replace display: none with a max-height transition to add smooth expand/collapse animations on mobile.

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