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