不使用js，純css實(shí)現(xiàn)點(diǎn)擊切換active樣式
一個(gè)父盒子中嵌套小標(biāo)簽,橫向排列
html
<div class="box">
<a href="#">選項(xiàng)1</a>
<a href="#">選項(xiàng)2</a>
<a href="#">選項(xiàng)3</a>
<a href="#">選項(xiàng)4</a>
<a href="#">選項(xiàng)5</a>
</div>
css文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-658281.html
.box{
width: 300px;
height: 300px;
background-color: #efefef;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.box a {
text-decoration: none;
color: #000;
display: inline-block;
height: 20px;
padding: 10px 0;
width: 100%;
text-align: center;
}
樣式
添加偽類
css
.box a:active,
.box a:focus {
color: #fff;
background-color: skyblue;
}
實(shí)現(xiàn)效果
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-658281.html
到了這里，關(guān)于使用css實(shí)現(xiàn)點(diǎn)擊切換active效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
