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

我在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;
}
}

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

回答

仅供参考：
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;
}

以上是 css实现选中后变色并且效果不消失 的全部内容， 来源链接： utcz.com/a/40624.html

回到顶部