可切换内容的标签页

 

效果图：

代码：

<template>
  <div>
    <div class="bruce flex-ct-x">
      <div class="tab-page">
        <nav>
          <h3>
            <input type="radio" name="tab" />
            <label for="tab1">标题1</label>
          </h3>
          <h3>
            <input type="radio" name="tab" />
            <label for="tab2">标题2</label>
          </h3>
          <h3>
            <input type="radio" name="tab" />
            <label for="tab3">标题3</label>
          </h3>
        </nav>
        <ul>
          <li>
            <input id="tab1" />
            <p>内容1</p>
          </li>
          <li>
            <input id="tab2" />
            <p>内容2</p>
          </li>
          <li>
            <input id="tab3" />
            <p>内容3</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  methods: {},

  created() {}
};
</script>
<style lang="scss" scoped>
.tab-page {
  width: 300px;
  margin: 0 auto;
  nav {
    display: flex;
    border: 1px solid green;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    h3 {
      position: relative;
      flex: 1;
      background-color: green;
      color: #fff;
      height: 100%;
      margin: 0;
      & + h3 {
        border-left: 1px solid #fff;
      }
    }
    input {
      display: none;
    }
    label {
      display: block;
      width: 100%;
      height: 100%;
      cursor: pointer;
    }
  }
  ul {
    overflow: hidden;
    scroll-behavior: smooth;
    border-top: none;
    height: 100px;
    width: 100%;
    padding: 0;
    border: 0;
    li {
      display: flex;
      position: relative;
      justify-content: center;
      align-items: center;
      height: 100%;
      font-size: 20px;
      color: blue;
      background-color: pink;
    }
    input {
      position: absolute;
      width: 0;
      height: 0;
      opacity: 0;
    }
  }
}
</style>