用css+div模拟一个tab切换栏

最新推荐文章于 2025-10-21 09:44:56 发布

原创最新推荐文章于 2025-10-21 09:44:56 发布 · 874 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

CSS

本文介绍了如何使用HTML和CSS实现一个具有切换效果的Tab栏组件。内容包括项目的概述、建设周期、设计效果图、考核体系及目标和建设子项等模块，通过点击不同Tab项，显示相应的内容。Tab栏采用灵活的布局方式，具有主题色变更功能，并在选中状态下突出显示。

效果如图
在这里插入图片描述

 <div class="tabBar">
      <div
        class="tab-item"
        :class="tabType === 1 ? 'active' : ''"
        @click="tabType = 1"
      >
        项目概述
      </div>
      <div
        class="tab-item"
        :class="tabType === 2 ? 'active' : ''"
        @click="tabType = 2"
      >
        建设周期
      </div>
      <div
        class="tab-item"
        :class="tabType === 3 ? 'active' : ''"
        @click="tabType = 3"
      >
        设计效果图
      </div>
      <div
        class="tab-item"
        :class="tabType === 4 ? 'active' : ''"
        @click="tabType = 4"
      >
        考核体系及目标
      </div>
      <div
        class="tab-item"
        :class="tabType === 5 ? 'active' : ''"
        @click="tabType = 5"
      >
        建设子项
      </div>
    </div>

使用
在这里插入图片描述
样式

  .tabBar {
    height: 50px;
    @include bg_color5($background-color5-theme1); // 引入主题变更时的样式颜色
    border-radius: 2px;
    display: flex;
    align-items: center;
    padding-left: 20px;
    .tab-item {
      padding: 0 24px;
      font-size: 16px;
      font-weight: 400;
      height: 50px;
      line-height: 50px;
      box-sizing: border-box;
      @include text_color2($text-color2-theme1);
      cursor: pointer;
      &.active {
        color: #1890ff;
        border-bottom: 2px solid #1890ff;
      }
    }
  }

标签

#css #html #html5