elementui点击导航栏在下方显示

要实现点击导航栏，在下方显示相应的内容，可以使用 Element UI 中的 Tab 组件。具体实现步骤如下：

1. 在需要使用 Tab 组件的页面中，引入 Element UI 的 Tab 组件。

2. 在页面中定义一个包含导航栏和 Tab 选项卡的容器。

3. 在导航栏中添加点击事件，通过绑定事件处理函数，实现点击导航栏时，显示相应的 Tab 选项卡。

4. 在 Tab 选项卡中添加需要显示的内容。

以下是示例代码：

<template>
  <div class="container">
    <el-tabs v-model="activeTab">
      <el-tab-pane label="选项卡1">选项卡1的内容</el-tab-pane>
      <el-tab-pane label="选项卡2">选项卡2的内容</el-tab-pane>
      <el-tab-pane label="选项卡3">选项卡3的内容</el-tab-pane>
    </el-tabs>
    <div class="nav">
      <div @click="activeTab = '选项卡1'">导航栏1</div>
      <div @click="activeTab = '选项卡2'">导航栏2</div>
      <div @click="activeTab = '选项卡3'">导航栏3</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: '选项卡1',
    };
  },
};
</script>

在上面的示例代码中，我们使用了 Element UI 的 Tab 组件，并在导航栏中添加了点击事件，通过绑定事件处理函数，实现点击导航栏时，显示相应的 Tab 选项卡。同时，在选项卡中添加需要显示的内容。