css如何实现选中激活标签相邻的前后元素??
想实现图片中的样式,点击激活的标签添加上active类名,然后选择active类名相邻的前后元素(改变相邻的前一个元素的右下角的圆角,改变相邻的后一个元素的右上角圆角)
.left{
width: 100px;
}
.left li{
height: 45px;
display: flex;
align-items: center;
justify-content: center;
transition: all .3s;
background: pink;
}
li.active{
background: #fff;
}
li.active+li{
border-radius: 0 10px 0 0;
}
<ul class="left">
<li :class="currentIndex==index?'active':''" @click="handleClick(index)" v-for="(item,index) in list" :key="index">{{item.name}}</li>
</ul>
回复
1个回答
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容