react實(shí)現(xiàn)頭部導(dǎo)航,選中狀態(tài)底部出現(xiàn)藍(lán)色條塊問題
更新時(shí)間：2023年11月14日 08:57:33 作者：HaanLen
這篇文章主要介紹了react實(shí)現(xiàn)頭部導(dǎo)航,選中狀態(tài)底部出現(xiàn)藍(lán)色條塊問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
導(dǎo)航樣式，選中item底部藍(lán)色
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;
}
}
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
React實(shí)現(xiàn)類似淘寶tab居中切換效果的示例代碼
這篇文章主要介紹了React實(shí)現(xiàn)類似淘寶tab居中切換效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
React類組件中super()和super(props)的區(qū)別詳解
這篇文章給大家詳細(xì)介紹了React類組件中super()和super(props)有什么區(qū)別,文中通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了在react中使用vuex的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了react(含hooks)中同步獲取state值的方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
React通過父組件傳遞類名給子組件的實(shí)現(xiàn)方法
React 是一個(gè)用于構(gòu)建用戶界面的 JAVASCRIPT 庫。這篇文章主要介紹了React通過父組件傳遞類名給子組件的方法,需要的朋友可以參考下2017-11-11
這篇文章主要為大家介紹了react源碼合成事件深入解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
在 React 中,嵌入和使用多個(gè)組件是構(gòu)建用戶界面的核心機(jī)制,React 鼓勵(lì)組件化開發(fā),允許將 UI 拆分為獨(dú)立、可復(fù)用的部分,以下是實(shí)現(xiàn)多個(gè)組件嵌套和使用的常見方法,需要的朋友可以參考下2025-08-08
Create?react?app修改webapck配置導(dǎo)入文件alias
這篇文章主要為大家介紹了Create?react?app修改webapck配置導(dǎo)入文件alias,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12
這篇文章主要介紹了React中DOM事件和狀態(tài)介紹，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，感興趣的小伙伴可以參考一下2022-08-08
教你使用vscode 搭建react-native開發(fā)環(huán)境
本文記錄如何使用vscode打造一個(gè)現(xiàn)代化的react-native開發(fā)環(huán)境，旨在提高開發(fā)效率和質(zhì)量。本文給大家分享我遇到的問題及解決方法，感興趣的朋友跟隨小編一起看看吧2021-07-07