react实现头部导航,选中状态底部出现蓝色条块问题
作者：HaanLen
这篇文章主要介绍了react实现头部导航,选中状态底部出现蓝色条块问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
导航样式，选中item底部蓝色
const [itemIndex, setItemIndex] = useState(0);
<div className="box" onClick={(e) => {
console.log('e', e.target?.dataset);
if (!e.target?.dataset?.index) { return; };
setItemIndex(Number(e.target?.dataset?.index));
}}
>
<div className="top-item" style={{ left: `${itemIndex * 25}%` }}></div>
<div
className={`${itemIndex === 0 ? 'item-active' : ''} box-item item1`}
data-index="0"
>item1
</div>
<div
className={`${itemIndex === 1 ? 'item-active' : ''} box-item item2`}
data-index="1"
>item2
</div>
<div
className={`${itemIndex === 2 ? 'item-active' : ''} box-item item3`}
data-index="2"
>item3
</div>
<div
className={`${itemIndex === 3 ? 'item-active' : ''} box-item item4`}
data-index="3"
>item4
</div>
</div>
利用border-bottom效果
.box {
margin-top: 40px;
width: 800px;
display: flex;
justify-content: space-around;
height: 60px;
font-size: 16px;
align-items: center; //垂直居中
border-bottom: 1px solid #888;
position: relative;
.box-item {
text-align: center;
}
.item-active {
color: #1581ff;
}
.top-item {
position: absolute;
height: 3px;
background-color: #1581ff;
bottom: 0;
width: calc(100% / 4);
left: 0;
}
}
利用伪元素效果
.box {
margin-top: 40px;
width: 800px;
display: flex;
justify-content: space-around;
height: 60px;
font-size: 16px;
align-items: center; //垂直居中
// border-bottom: 1px solid #888;
position: relative;
&::after {
content: "";
width: 100%;
height: 1px;
position: absolute;
left: 0;
bottom: 0;
// background-color: #e7e7e7;
background-color: #888;
}
.box-item {
text-align: center;
}
.item-active {
color: #1581ff;
}
.top-item {
position: absolute;
height: 3px;
background-color: #1581ff;
bottom: 0;
width: calc(100% / 4);
left: 0;
}
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。