触碰一个盒子显示另一个盒子，网站首页导航栏，用css，js，vue2怎么实现

要实现这样一个效果，通常会结合CSS样式、JavaScript事件监听以及Vue 2.0的数据绑定和组件化特性。以下是简单的步骤：

1. **HTML结构**:
首先创建两个或更多个`<div>`元素，每个代表一个盒子，其中包含链接到其他盒子的HTML内容。比如：

   <template>
     <div class="container">
       <div v-for="(box, index) in boxes" :key="index" @click="showBox(box)">
         <span :class="{ active: box === currentBox }">{{ box.title }}</span>
       </div>
     </div>
   </template>

2. **CSS**:
使用CSS来设置盒子的默认样式和激活状态的样式，例如：

   .container {
     display: flex;
     justify-content: space-around;
   }
   .active {
     background-color: lightblue; /* 可以自定义 */
   }

3. **Vue 2.0数据和方法**:
在`script`部分声明数据属性`boxes`、`currentBox`和相关的事件处理函数`showBox`：

   data() {
     return {
       boxes: ['Box A', 'Box B'], // 假设你有两个盒子
       currentBox: null,
     };
   },
   methods: {
     showBox(box) {
       this.currentBox = box;
     },
   },

当点击某个盒子标题时，调用`showBox`方法更新`currentBox`的状态，并通过`:class`指令更新盒子的样式。

4. **初始化当前盒**:
在`mounted()`生命周期钩子里，初始化第一个盒子为当前展示的盒子：

   mounted() {
     this.currentBox = this.boxes[0];
   },

完成以上步骤后，当你触碰首页导航栏的一个盒子时，它将显示为活跃状态，并显示相应的另一个盒子内容。