「这是我参与11月更文挑战的第二十八天，活动详情查看：2021最后一次更文挑战」。

往期推荐：

「CSS之变量」

「CSS之变量（二）条形加载条」

「CSS之变量（三）心形加载条」

「CSS之变量（四）悬浮跟踪按钮」

前言

还记得之前我们通过 css 选择器实现的表情选择器，忘记的话，可以回头看看，那今天了 我们把它又弄来了，没错，他又来了，不过这回我们实现的思路和以前的可不一样哦，他要引入我们前几章学习的变量，好了废话不多说，开始把。

标签导航

回顾一下我们之前说的知识：

• 读取变量：elem.style.getPropertyValue()

• 设置变量：elem.style.setProperty()

• 删除变量：elem.style.removeProperty()

实现上，主要还是在<ul>上通过定义--tab-index表示当前页，点击时重新设置置--tab-index的值。在设置变量 tab-move， 通过calc()计算--tab-index与--tab-move的关系，使用transform:translate3d()移动<ul>。

代码实现

<div class="tab-navbar">
  <nav>
    <a v-for="(v, i) in list" :key="v" :class="{ active: index === i }" @click="select(i)">标题{{i + 1}}</a>
  </nav>
  <div>
    <ul ref="tabs" :style="`--tab-count: ${list.length}`" class="ml">
      <li v-for="(v, i) in list" :key="v" :style="`--bg-color: ${v}`">内容{{i + 1}}</li>
    </ul>
  </div>
</div>

.ml {
  margin: 0;
  padding: 0;
}

.tab-navbar {
  display: flex;
  overflow: hidden;
  flex-direction: column-reverse;
  border-radius: 10px;
  width: 800px;
  height: 500px;
  nav {
    display: flex;
    height: 40px;
    background-color: #f0f0f0;
    line-height: 40px;
    text-align: center;
    a {
      flex: 1;
      cursor: pointer;
      transition: all 300ms;
      &.active {
        background-color: pink;
        color: #fff;
      }
    }
  }
  div {
    flex: 1;
    ul {
      --tab-index: 0;
      --tab-width: calc(var(--tab-count) * 100%);
      --tab-move: calc(var(--tab-index) / var(--tab-count) * -100%);
      display: flex;
      flex-wrap: nowrap;
      width: var(--tab-width);
      height: 100%;
      transform: translate3d(var(--tab-move), 0, 0);
      transition: all 300ms;
    }
    li {
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
      background-color: var(--bg-color);
      font-weight: bold;
      font-size: 20px;
      color: #fff;
    }
  }
}

export default {
  data() {
    return {
      index: 0,
      list: ["red", "orange", "yellow", "green"]
    };
  },
  methods: {
    select(i) {
      this.index = i;
      this.$refs.tabs.style.setProperty("--tab-index", i);
    }
  }
};

好，今天就到这里了，今天努力的你依然是最棒的，Bye Bye！！！