react實現頭部導航,選中狀態(tài)底部出現藍色條塊問題
更新時間：2023年11月14日 08:57:33 作者：HaanLen
這篇文章主要介紹了react實現頭部導航,選中狀態(tài)底部出現藍色條塊問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
導航樣式，選中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;
}
}
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家介紹了React?Virtual?DOM前端框架全面分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
一些剛開始學習 React，或者從其他框架轉入 React 的開發(fā)者，一開始可能不會太關注性能。因為需要一些時間來發(fā)現新學習的框架的性能缺點。這篇文章主要介紹提高React性能的技巧，感興趣的同學可以參考閱讀2023-04-04
React超詳細分析useState與useReducer源碼
我正在處理的組件是表單的時間輸入。表單相對復雜，并且是動態(tài)生成的，根據嵌套在其他數據中的數據顯示不同的字段。我正在用useReducer管理表單的狀態(tài)，到目前為止效果很好2022-11-11
這篇文章主要介紹了React+Spring實現跨域問題的完美解決方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
本篇文章主要介紹了探究react-native 源碼的圖片緩存問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了React 路由懶加載的幾種實現方案，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
前些日子在做項目的時候,需要封裝一個Toast組件,我想起之前用過的庫,只要在入口文件中引入就可以在全局中使用,還是很方便的,借這次機會也來實現一下,所以本文介紹了React中如何編寫一個全局Toast,需要的朋友可以參考下2024-05-05
React動畫實現方案Framer Motion讓頁面自己動起來
這篇文章主要為大家介紹了React動畫實現方案Framer Motion讓頁面自己動起來，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
本文總結了reactswiper@6.x版本的使用方法和配置,包括安裝步驟和配置自動輪播及移入停止的選項,感興趣的朋友跟隨小編一起看看吧2025-01-01
最近在學習React的過程中遇到了路由跳轉后頁面不刷新的問題，本文就詳細的介紹一下解決方法，需要的朋友們下面隨著小編來一起學習學習吧2021-06-06