仅用CSS/HTML实现图标块点击切换显示内容（无JavaScript）

Absolutely! You can achieve this toggle functionality using only HTML and CSS by leveraging hidden radio buttons (which are mutually exclusive—perfect for showing only one content section at a time) and sibling selectors. Here's a complete solution that fits your requirements:

<div class="icon-toggle-container">
  <!-- Hidden radio buttons for toggling -->
  <input type="radio" id="icon-option-1" name="icon-toggle" checked>
  <input type="radio" id="icon-option-2" name="icon-toggle">
  <input type="radio" id="icon-option-3" name="icon-toggle">
  <input type="radio" id="icon-option-4" name="icon-toggle">

  <!-- Icon grid (4 items in a row) -->
  <div class="icon-grid">
    <label for="icon-option-1" class="icon-block">
      <!-- Replace with your icon (SVG, icon font, etc.) -->
      <span class="icon">📁</span>
      <span class="icon-label">Section 1</span>
    </label>
    <label for="icon-option-2" class="icon-block">
      <span class="icon">📊</span>
      <span class="icon-label">Section 2</span>
    </label>
    <label for="icon-option-3" class="icon-block">
      <span class="icon">⚙️</span>
      <span class="icon-label">Section 3</span>
    </label>
    <label for="icon-option-4" class="icon-block">
      <span class="icon">ℹ️</span>
      <span class="icon-label">Section 4</span>
    </label>
  </div>

  <!-- Content sections (shown below the icon grid) -->
  <div class="content-area">
    <div class="content-item content-1">
      <h3>Content for Section 1</h3>
      <p>This is the detailed content that appears when you click the first icon block.</p>
    </div>
    <div class="content-item content-2">
      <h3>Content for Section 2</h3>
      <p>Here's the content associated with the second icon—only visible when its icon is selected.</p>
    </div>
    <div class="content-item content-3">
      <h3>Content for Section 3</h3>
      <p>Toggle to this section to see settings or other relevant info.</p>
    </div>
    <div class="content-item content-4">
      <h3>Content for Section 4</h3>
      <p>This is the content linked to the fourth icon in the grid.</p>
    </div>
  </div>
</div>

/* Hide the radio buttons visually */
.icon-toggle-container input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Style the icon grid layout */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

/* Style individual icon blocks */
.icon-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.25rem;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  background-color: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.icon-block:hover {
  background-color: #f8fafc;
  border-color: #cbd5e1;
}

/* Highlight the active (selected) icon block */
#icon-option-1:checked ~ .icon-grid label[for="icon-option-1"],
#icon-option-2:checked ~ .icon-grid label[for="icon-option-2"],
#icon-option-3:checked ~ .icon-grid label[for="icon-option-3"],
#icon-option-4:checked ~ .icon-grid label[for="icon-option-4"] {
  background-color: #eff6ff;
  border-color: #3b82f6;
  color: #1e40af;
}

.icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.icon-label {
  font-size: 0.9rem;
  font-weight: 500;
}

/* Hide all content items by default */
.content-area .content-item {
  display: none;
  padding: 1.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background-color: #ffffff;
}

/* Show the corresponding content when its radio button is checked */
#icon-option-1:checked ~ .content-area .content-1,
#icon-option-2:checked ~ .content-area .content-2,
#icon-option-3:checked ~ .content-area .content-3,
#icon-option-4:checked ~ .content-area .content-4 {
  display: block;
}

Key Details: #

• Mutually Exclusive Toggling: Using radio buttons with the same name attribute ensures only one content section is visible at a time.
• Hidden Controls: The radio buttons are hidden from view but still functional when their associated labels (icon blocks) are clicked.
• Visual Feedback: Hover and active states for icon blocks let users know which option is selected.
• Grid Layout: The icons are arranged in a responsive 4-column grid using CSS Grid.
• Customizable: Replace the emoji icons with your own SVG icons or icon font, adjust colors/padding to match your design system.

This solution works entirely without JavaScript and meets all your requirements: icon-based toggling, single content display at a time, content positioned below the icon grid.

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