如何解决如何将边框底部赋予活动选项卡
我正在创建一个标签,点击后我想为底部添加颜色
最初我创建了一行(div),并为其添加了一些CSS,以便它出现在底部, 现在,当我单击一个特定的选项卡时,我正在更改文本的颜色,但是我也想提供一些底部边框。
为此,我仅使用以下CSS
.active {
position: absolute;
margin-top: 1.5rem;
height: 4px;
width: 9%;
background-color: red;
}
但是在这里我必须修复导致问题的原因,我希望它占据文本的整个宽度。
我的代码
{
common_data.map((li,index) => ( <
div key = {
index
}
className = "d-flex menu_group"
onClick = {
() => menu_click(index)
}
onMouseEnter = {
() => mouse_enter(index)
}
onMouseLeave = {
mouse_leave
} >
<
i className = {
index === menu_state ?
li.icon + '-fill icon_menu_fill' :
index === idi ?
li.icon + '-line icon_menu_line onHover' :
li.icon + '-line icon_menu_line'
} > < /i> <
div className = {
index === menu_state ?
'name_active' :
index === idi ?
'onHover name_not_active' :
'name_not_active'
} > {
li.menu
} <
/div> <
div className = {
index === menu_state ? 'active d-flex flex-column' : ''
} > < /div> <
/div>
))
}
我认为我缺少一小部分,我的工作方式只是破解,我想以适当的方式做到这一点。
解决方法
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。