求助：实现文件夹样式的交互式前端菜单开发

以下是完全符合需求的实现代码，包含悬停变宽、点击切换内容、图标集成的完整功能：

完整代码 #

HTML #

<div class="folder-menu">
  <!-- 标记栏 -->
  <div class="tab-bar">
    <div class="tab active" data-tab="tab1">
      <i class="fa-solid fa-folder"></i>
      <span>页面1</span>
    </div>
    <div class="tab" data-tab="tab2">
      <i class="fa-solid fa-image"></i>
      <span>页面2</span>
    </div>
    <div class="tab" data-tab="tab3">
      <i class="fa-solid fa-file-text"></i>
      <span>页面3</span>
    </div>
    <div class="tab" data-tab="tab4">
      <i class="fa-solid fa-music"></i>
      <span>页面4</span>
    </div>
    <div class="tab" data-tab="tab5">
      <i class="fa-solid fa-video"></i>
      <span>页面5</span>
    </div>
    <div class="tab" data-tab="tab6">
      <i class="fa-solid fa-code"></i>
      <span>页面6</span>
    </div>
    <div class="tab" data-tab="tab7">
      <i class="fa-solid fa-cog"></i>
      <span>页面7</span>
    </div>
    <div class="tab" data-tab="tab8">
      <i class="fa-solid fa-user"></i>
      <span>页面8</span>
    </div>
  </div>

  <!-- 内容区域 -->
  <div class="content-area">
    <div class="content active" id="tab1">
      <h2>页面1内容</h2>
      <p>这是页面1的专属内容区域，可添加文字和图片。</p>
      <img src="https://picsum.photos/600/300?random=1" alt="页面1图片">
    </div>
    <div class="content" id="tab2">
      <h2>页面2内容</h2>
      <p>这是页面2的专属内容区域，可添加文字和图片。</p>
      <img src="https://picsum.photos/600/300?random=2" alt="页面2图片">
    </div>
    <div class="content" id="tab3">
      <h2>页面3内容</h2>
      <p>这是页面3的专属内容区域，可添加文字和图片。</p>
      <img src="https://picsum.photos/600/300?random=3" alt="页面3图片">
    </div>
    <div class="content" id="tab4">
      <h2>页面4内容</h2>
      <p>这是页面4的专属内容区域，可添加文字和图片。</p>
      <img src="https://picsum.photos/600/300?random=4" alt="页面4图片">
    </div>
    <div class="content" id="tab5">
      <h2>页面5内容</h2>
      <p>这是页面5的专属内容区域，可添加文字和图片。</p>
      <img src="https://picsum.photos/600/300?random=5" alt="页面5图片">
    </div>
    <div class="content" id="tab6">
      <h2>页面6内容</h2>
      <p>这是页面6的专属内容区域，可添加文字和图片。</p>
      <img src="https://picsum.photos/600/300?random=6" alt="页面6图片">
    </div>
    <div class="content" id="tab7">
      <h2>页面7内容</h2>
      <p>这是页面7的专属内容区域，可添加文字和图片。</p>
      <img src="https://picsum.photos/600/300?random=7" alt="页面7图片">
    </div>
    <div class="content" id="tab8">
      <h2>页面8内容</h2>
      <p>这是页面8的专属内容区域，可添加文字和图片。</p>
      <img src="https://picsum.photos/600/300?random=8" alt="页面8图片">
    </div>
  </div>
</div>

<!-- 引入Font Awesome图标库 -->
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>

CSS #

/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

.folder-menu {
  width: 90%;
  max-width: 1200px;
  margin: 2rem auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-radius: 8px;
  overflow: hidden;
}

/* 标记栏样式 */
.tab-bar {
  display: flex;
  background-color: #f0f0f0;
  border-bottom: 2px solid #ddd;
}

.tab {
  /* 默认宽度，8个标签平分宽度 */
  flex: 1;
  min-width: 80px;
  padding: 1rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  background-color: #e0e0e0;
  cursor: pointer;
  transition: all 0.3s ease;
  border-right: 1px solid #ddd;
}

/* 悬停时变宽 */
.tab:hover {
  flex: 1.5;
  background-color: #ff6b6b;
  color: white;
}

/* 选中状态保持宽样式 */
.tab.active {
  flex: 1.5;
  background-color: #ff6b6b;
  color: white;
}

.tab i {
  font-size: 1.5rem;
}

.tab span {
  font-size: 0.9rem;
  text-align: center;
}

/* 内容区域样式 */
.content-area {
  padding: 2rem;
  background-color: white;
  min-height: 400px;
}

.content {
  display: none;
}

.content.active {
  display: block;
}

.content img {
  margin-top: 1rem;
  max-width: 100%;
  border-radius: 4px;
}

JavaScript #

// 获取所有标记和内容元素
const tabs = document.querySelectorAll('.tab');
const contents = document.querySelectorAll('.content');

tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    // 移除所有标记的active类，恢复原宽度
    tabs.forEach(t => t.classList.remove('active'));
    // 给当前点击的标记添加active类，保持宽状态
    tab.classList.add('active');

    // 获取当前标记对应的内容ID
    const targetTab = tab.dataset.tab;
    // 隐藏所有内容
    contents.forEach(content => content.classList.remove('active'));
    // 显示对应的内容
    document.getElementById(targetTab).classList.add('active');
  });
});

功能说明 #

1. 悬停变宽：鼠标悬浮在标记上时，标记会通过flex属性变化平滑变宽，同时背景色变为红色（可通过CSS自定义颜色）。
2. 点击切换：点击标记时自动切换到对应内容页面，所有其他标记恢复原宽度，当前标记保持宽状态。
3. 图标集成：使用Font Awesome图标，可替换为自定义图片（将<i>标签替换为<img src="你的图标路径" alt="图标描述">即可）。
4. 自定义扩展：可修改CSS中的颜色、宽度、过渡时间等参数适配设计需求，内容区域可自由添加文字、图片等元素。

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