css实现选中后变色并且效果不消失

Question

我在vue项目里面。想实现以下效果：
css实现选中后变色并且效果不消失。

我用了伪类。点击之后。确实会变色。
但是只是在鼠标点下去那一瞬间会变色。
当鼠标点完之后。效果就消失了。
我的代码：

        <!--上面部分：推荐标签-->
        <div class="topic-list-box-top">
          <ul class="tag-list">
            <li v-for="(item,index) in topicClass" :key="index" @click="getTopic(item.topicClassId)">
              <a><span>{{ item.topicClassName }}</span></a>
            </li>
          </ul>
        </div>

css：

        li {
          width: 68px;
          height: 30px;
          float: left;
          margin-top: 30px;
          margin-right: 40px;
          display: inline-block;
          background: #F6F6F6;
          opacity: 1;
          border-radius: 4px;

          a {
            display: block;
            text-align: center;
            line-height: 30px;
            cursor: pointer;
            span {
              font-size: 14px;
              color: #666666;
            }
          }

        }

        //li:first-child {
        //  background-color: #FFBF00;
        //}
        li:active{
          background-color: #FFBF00;
          span {
            color: #FFFFFF;
          }
        }

请问怎么让它选中之后。颜色暂时不变啊？
如图：

Answer 1

仅供参考：
1.先在data里面加个属性 selectedIndex: 0
2.css改动

li.active {
    background-color: #FFBF00;
    span {
        color: #FFFFFF;
    }
}

3.dom改动

<div class="topic-list-box-top">
    <ul class="tag-list">
        <li v-for="(item,index) in topicClass" :key="index" :class="selectedIndex == index ? 'active':''" @click="getTopic(index, item.topicClassId)">
        <a><span>{{ item.topicClassName }}</span></a>
        </li>
    </ul>
</div>

4.方法改动

getTopic(index, id) {
    this.selectedIndex = index;
}