HTML CSS 탭 선택하기

  <div>
    <div class="wrap_tab">
      <p
        :class="getCurrentSectionStyle(0)"
        @click="selectSection(0)"
      >
        만두
      </p>
      <p
        :class="getCurrentSectionStyle(1)"
        @click="selectSection(1)"
      >
        대니
      </p>
      <p
        :class="getCurrentSectionStyle(2)"
        @click="selectSection(2)"
      >
        릴리
      </p>
    </div>
    <div v-if="isCurrentSection(0)" class="board">
      안녕
    </div>
    <div v-if="isCurrentSection(1)" class="board">
      좋아
    </div>
    <div v-if="isCurrentSection(2)" class="board">
      사랑해
    </div>
  </div>

// 메뉴 선택 값
const currentSection = ref(0);
const isCurrentSection = (value: number) => currentSection.value === value;
const getCurrentSectionStyle = (value: number) => ({
  nav_title: true,
  active: isCurrentSection(value),
});
const selectSection = (value: number) => {
  currentSection.value = value;
};

.wrap_tab {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  // width: 400px;
  border-bottom: solid 1px #e5e5e5;

  >p {
    box-sizing: border-box;
    flex: 1;
    padding: 23px 0 16px;
    margin-bottom: 0 !important;
    font-size: 15px;
    color: #b8b8b8;
    text-align: center;
    letter-spacing: -0.75px;
    cursor: pointer;
  }

  .active {
    font-size: 15px;
    font-weight: bold;
    color: #1e2b67;
    border-bottom: solid 5px #1e2b67;
  }
}