如何在首页以三栏布局展示三个不同的文章循环

嘿，我刚好做过类似的需求，给你一套完全贴合要求的简洁稳定实现方案——核心思路是用原生技术实现tab切换，让两组文章共享main区域，同时第三组独立展示，全程无第三方依赖，维护起来超省心。

核心需求拆解 #

先明确咱们要落地的关键点：

• 三组不同类别的最新文章，每组展示数量不同
• 其中两组共享main内容区（通过tab切换实现，切换时仅显示当前组）
• 方案要简洁、稳定，避免复杂逻辑和冗余代码

1. 数据层准备（后端/模拟数据） #

首先需要三个类别的文章数据源，实际项目里可以从后端接口获取，这里先模拟一组示例数据：

// 模拟三个类别的最新文章数据，实际替换为接口请求（比如fetch/axios）
const articleData = {
  // 技术文章：展示5篇最新
  tech: [
    { title: "2024前端性能优化新技巧", excerpt: "聊聊今年大火的性能优化方案...", date: "2024-05-20" },
    { title: "Node.js异步编程进阶", excerpt: "从Promise到Async/Await的深度解析...", date: "2024-05-18" },
    // 剩余3篇省略...
  ],
  // 生活随笔：展示3篇最新
  life: [
    { title: "周末露营的小确幸", excerpt: "分享一次难忘的户外露营经历...", date: "2024-05-19" },
    // 剩余2篇省略...
  ],
  // 技术教程：展示4篇最新（独立展示）
  tutorial: [
    { title: "React Hooks快速上手", excerpt: "从零开始学习React核心Hooks...", date: "2024-05-17" },
    // 剩余3篇省略...
  ]
};

2. 视图层结构（HTML） #

布局采用网格拆分，main区放可切换的两组文章，侧边放第三组，结构清晰一目了然：

<div class="home-page">
  <!-- Main内容区：两组可切换的文章 -->
  <div class="main-content">
    <!-- Tab切换导航 -->
    <div class="tab-nav">
      <button class="tab-btn active" data-tab="tech">技术文章</button>
      <button class="tab-btn" data-tab="life">生活随笔</button>
    </div>
    <!-- Tab内容容器 -->
    <div class="tab-content">
      <div id="tech" class="tab-pane active">
        <!-- 技术文章列表：动态渲染 -->
      </div>
      <div id="life" class="tab-pane">
        <!-- 生活随笔列表：动态渲染 -->
      </div>
    </div>
  </div>

  <!-- 第三组独立展示的文章 -->
  <div class="sidebar-content">
    <h3>最新教程</h3>
    <div id="tutorial" class="article-list">
      <!-- 教程文章列表：动态渲染 -->
    </div>
  </div>
</div>

3. 样式层（CSS） #

用基础CSS实现布局和交互样式，保证跨浏览器兼容性：

/* 页面整体布局 */
.home-page {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  padding: 1.5rem;
}

/* Tab导航样式 */
.tab-nav {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.tab-btn {
  padding: 0.6rem 1.2rem;
  border: none;
  background-color: #f5f5f5;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.2s;
}
.tab-btn:hover {
  background-color: #e0e0e0;
}
.tab-btn.active {
  background-color: #2d3748;
  color: white;
}

/* Tab内容切换样式 */
.tab-pane {
  display: none;
}
.tab-pane.active {
  display: block;
}

/* 文章列表通用样式 */
.article-list {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.article-item {
  padding: 1.2rem;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  transition: box-shadow 0.2s;
}
.article-item:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.article-item h4 {
  margin: 0 0 0.5rem 0;
  color: #2d3748;
}
.article-item p {
  margin: 0 0 0.5rem 0;
  color: #4a5568;
  font-size: 0.9rem;
}
.article-item .date {
  color: #718096;
  font-size: 0.8rem;
}

4. 交互逻辑（原生JS） #

用原生JS实现渲染和tab切换，没有任何依赖，稳定可靠：

// 通用渲染文章列表函数
function renderArticles(containerId, articles) {
  const container = document.getElementById(containerId);
  if (!container) return;

  container.innerHTML = articles.map(article => `
    <div class="article-item">
      <h4>${article.title}</h4>
      <p>${article.excerpt}</p>
      <span class="date">${article.date}</span>
    </div>
  `).join('');
}

// 初始化渲染所有文章
renderArticles('tech', articleData.tech);
renderArticles('life', articleData.life);
renderArticles('tutorial', articleData.tutorial);

// Tab切换逻辑
const tabBtns = document.querySelectorAll('.tab-btn');
tabBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    // 移除所有元素的active类
    tabBtns.forEach(b => b.classList.remove('active'));
    document.querySelectorAll('.tab-pane').forEach(pane => pane.classList.remove('active'));
    
    // 给当前按钮和对应内容添加active类
    btn.classList.add('active');
    const targetTab = document.getElementById(btn.dataset.tab);
    if (targetTab) targetTab.classList.add('active');
  });
});

方案优势 #

• 无依赖：全程用原生技术实现，避免第三方库的版本兼容问题，加载更快
• 简洁易维护：代码拆分清晰，数据、视图、逻辑分离，后续修改类别或数量超简单
• 稳定可靠：没有复杂的状态管理，tab切换逻辑简单直接，几乎不会出bug
• 可扩展：如果后续要增加更多类别，只需要添加tab按钮、对应的数据和渲染逻辑即可

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