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