如何在点击按钮时在单个View Controller中切换显示不同视图

嘿，这个需求其实就是前端里超常见的选项卡(Tab)切换场景嘛！我给你整理了几种不同技术栈的靠谱实现方式，你可以根据自己的项目情况来选：

1. 原生HTML/CSS/JavaScript（无框架） #

如果你的项目没用到任何前端框架，用原生代码就能轻松搞定，核心思路很直观：给每个按钮绑定点击事件，点击时切换对应视图的显示状态，用CSS的display: none藏起未激活的视图。

示例代码： #

<!-- HTML结构 -->
<div class="tab-buttons">
  <button class="tab-btn active" data-tab="tab1">按钮1</button>
  <button class="tab-btn" data-tab="tab2">按钮2</button>
  <button class="tab-btn" data-tab="tab3">按钮3</button>
</div>

<div class="tab-content">
  <div id="tab1" class="tab-pane active">视图1专属内容</div>
  <div id="tab2" class="tab-pane">视图2专属内容</div>
  <div id="tab3" class="tab-pane">视图3专属内容</div>
</div>

/* CSS样式 */
.tab-pane {
  display: none; /* 默认隐藏所有视图 */
  padding: 15px;
  border: 1px solid #eee;
}
.tab-pane.active {
  display: block; /* 激活的视图显示 */
}
.tab-btn {
  padding: 8px 16px;
  border: none;
  cursor: pointer;
}
.tab-btn.active {
  background-color: #e0e0e0; /* 给激活按钮加样式区分 */
}

// JavaScript逻辑
const tabButtons = document.querySelectorAll('.tab-btn');
const tabPanes = document.querySelectorAll('.tab-pane');

tabButtons.forEach(button => {
  button.addEventListener('click', () => {
    // 先移除所有按钮和视图的active类
    tabButtons.forEach(btn => btn.classList.remove('active'));
    tabPanes.forEach(pane => pane.classList.remove('active'));
    
    // 给当前点击的按钮和对应视图添加active类
    button.classList.add('active');
    const targetTab = document.getElementById(button.dataset.tab);
    targetTab.classList.add('active');
  });
});

2. Vue框架实现 #

如果用Vue开发，直接用数据驱动的方式会更简洁，用v-show或者v-if控制视图显示就行：

示例代码： #

<template>
  <div class="tab-container">
    <button 
      @click="activeTab = 'tab1'" 
      :class="{ active: activeTab === 'tab1' }"
      class="tab-btn"
    >按钮1</button>
    <button 
      @click="activeTab = 'tab2'" 
      :class="{ active: activeTab === 'tab2' }"
      class="tab-btn"
    >按钮2</button>
    <button 
      @click="activeTab = 'tab3'" 
      :class="{ active: activeTab === 'tab3' }"
      class="tab-btn"
    >按钮3</button>

    <div v-show="activeTab === 'tab1'" class="tab-pane">视图1专属内容</div>
    <div v-show="activeTab === 'tab2'" class="tab-pane">视图2专属内容</div>
    <div v-show="activeTab === 'tab3'" class="tab-pane">视图3专属内容</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'tab1' // 默认激活第一个视图
    };
  }
};
</script>

<style scoped>
.tab-container {
  margin: 10px;
}
.tab-pane {
  margin-top: 10px;
  padding: 15px;
  border: 1px solid #eee;
}
.tab-btn {
  padding: 8px 16px;
  border: none;
  cursor: pointer;
  margin-right: 5px;
}
.tab-btn.active {
  background-color: #e0e0e0;
}
</style>

3. React框架实现 #

React里可以用useState钩子维护激活状态，根据状态判断渲染哪个视图：

示例代码： #

import { useState } from 'react';
import './TabView.css';

function TabView() {
  const [activeTab, setActiveTab] = useState('tab1');

  return (
    <div className="tab-container">
      <button 
        onClick={() => setActiveTab('tab1')}
        className={`tab-btn ${activeTab === 'tab1' ? 'active' : ''}`}
      >
        按钮1
      </button>
      <button 
        onClick={() => setActiveTab('tab2')}
        className={`tab-btn ${activeTab === 'tab2' ? 'active' : ''}`}
      >
        按钮2
      </button>
      <button 
        onClick={() => setActiveTab('tab3')}
        className={`tab-btn ${activeTab === 'tab3' ? 'active' : ''}`}
      >
        按钮3
      </button>

      {activeTab === 'tab1' && <div className="tab-pane">视图1专属内容</div>}
      {activeTab === 'tab2' && <div className="tab-pane">视图2专属内容</div>}
      {activeTab === 'tab3' && <div className="tab-pane">视图3专属内容</div>}
    </div>
  );
}

export default TabView;

/* TabView.css */
.tab-container {
  margin: 10px;
}
.tab-pane {
  margin-top: 10px;
  padding: 15px;
  border: 1px solid #eee;
}
.tab-btn {
  padding: 8px 16px;
  border: none;
  cursor: pointer;
  margin-right: 5px;
}
.tab-btn.active {
  background-color: #e0e0e0;
}

核心思路总结 #

不管用哪种技术栈，核心逻辑都是一致的：

• 维护一个“当前激活视图”的状态
• 点击按钮时更新这个状态
• 根据状态控制对应视图显示，其余视图隐藏

这样就能保证同一时间只有一个视图展示，而且每个视图可以完全独立设计样式和内容~

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