国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

用純css實(shí)現(xiàn)Tab切換

hizengzeng / 698人閱讀

摘要:所以當(dāng)我們思考能否用來(lái)實(shí)現(xiàn)時(shí)還應(yīng)考慮到的結(jié)構(gòu),能不能構(gòu)造出滿足已存在的選擇器的布局。用來(lái)實(shí)現(xiàn)的好處就是可以盡量大的把組件功能和業(yè)務(wù)邏輯分離開來(lái),真正做一個(gè)組件該做的事,希望越來(lái)越好

我們今天用css來(lái)實(shí)現(xiàn)一個(gè)常見的tab切換效果

查看原文可以有更好的排版效果哦

先看效果

https://codepen.io/xboxyan/pe...

前言

哪些簡(jiǎn)單的效果可以考慮用css來(lái)實(shí)現(xiàn)呢,目前css能夠做的交互有

鼠標(biāo)經(jīng)過(guò)/離開:hover

鼠標(biāo)點(diǎn)擊::cheked

那是不是上述所有的交互都可以用css來(lái)實(shí)現(xiàn)呢?顯然不是的,css實(shí)現(xiàn)依賴于html結(jié)構(gòu),因?yàn)閏ss選擇器有限,有子選擇器,沒有父選擇器,有后選擇器,沒有前選擇器,所以局限性很大。所以當(dāng)我們思考能否用css來(lái)實(shí)現(xiàn)時(shí)還應(yīng)考慮到html的結(jié)構(gòu),能不能構(gòu)造出滿足css已存在的選擇器的html布局。

先從html結(jié)構(gòu)說(shuō)起

一般在碰到tab類型的組件時(shí),一般會(huì)有如下的html

tab01
tab02
tab03
111
222
333

大致就是這種布局吧,暫且稱作分離模式吧,足夠靈活,就是導(dǎo)航部分和內(nèi)容結(jié)構(gòu)分開,需要什么動(dòng)畫效果都可以分別實(shí)現(xiàn)。

還有一種布局,大概是這樣的

tab01
111
tab01
111
tab01
111

這里每一個(gè)tab里面的導(dǎo)航和內(nèi)容是一起的,我們稱為合并模式吧,這種在組件化里面很常見,比如在react里面,一個(gè)tab組件,一般會(huì)寫成這樣

ReactDOM.render(
  
    Content of Tab Pane 1
    Content of Tab Pane 2
    Content of Tab Pane 3
  ,
mountNode);

是不是很像?

相信用js只要是一名合格的前端都能輕易的實(shí)現(xiàn)吧,這里我們主要是研究如何用css來(lái)實(shí)現(xiàn)

第一種布局(分離模式)

這里有兩種思路

錨點(diǎn)實(shí)現(xiàn) herf + :target

css3 nth-child(n) 選擇器

錨點(diǎn)實(shí)現(xiàn)主要是在a標(biāo)簽加上href屬性,然后目標(biāo)元素上添加相同的id,當(dāng)點(diǎn)擊a標(biāo)簽時(shí),目標(biāo)元素的:target就生效了


跳轉(zhuǎn)
內(nèi)容

這種方式可以將導(dǎo)航和內(nèi)容鏈接到一塊,但是在瀏覽器中有一個(gè)很不友好的地方,就是當(dāng)點(diǎn)擊帶有錨點(diǎn)的a鏈接的時(shí)候,瀏覽器會(huì)自動(dòng)定位到目標(biāo)位置,很影響體驗(yàn),需要去掉這種效果估計(jì)還得借助js來(lái)實(shí)現(xiàn),故不太推薦用這種方式

nth-child(n) 選擇器,這種方式就比較傳統(tǒng)了,不過(guò)導(dǎo)航切換部分還是用到label+input[type=radio],實(shí)現(xiàn)基本和js是同一個(gè)思路,甚至還不如js方便,因?yàn)槟阌卸嗌賯€(gè)tab選項(xiàng)就得寫多少個(gè)nth-child樣式

.tab-nav input:nth-of-type(1):checked ~ .tab-content :nth-of-type(1),
.tab-nav input:nth-of-type(2):checked ~ .tab-content :nth-of-type(2),
.tab-nav input:nth-of-type(3):checked ~ .tab-content :nth-of-type(3),
...
{
  z-index:1
}

你大概會(huì)看到這樣的樣式,如果選項(xiàng)卡比較固定,基本是靜態(tài)的,比較少,可以一一寫出來(lái),如果比較多,或者是js生成的,那么建議這一部分樣式也通過(guò)js生成出來(lái)。

下面著重來(lái)實(shí)現(xiàn)第二種布局

第二種布局(合并模式)

如果是這樣一種布局,那么導(dǎo)航和內(nèi)容就可以通過(guò)相鄰選擇器+聯(lián)系上了,重點(diǎn)是如何實(shí)現(xiàn)選項(xiàng)卡的樣式,當(dāng)然,我們也需要改一下html

111
222
333

然后我們通過(guò)樣式美化一下

.tabs{
  position:relative;
  width:400px;
  height:300px;
}
.tab-pane{
  display:inline-block;
}
.tabs input[type="radio"]{
  position:absolute;
  clip:rect(0,0,0,0)
}
.tab-item{
  display:block;
  height:34px;
  line-height:34px;
  cursor:pointer;
  padding:0 10px
}

.tab-content{
  position:absolute;
  border:1px solid #eee;
  padding:20px;
  left:0;
  top:36px;
  bottom:0;
  right:0;
  background:#fff;
}

然后加入交互,主要就是相鄰選擇器+:checked選擇器,

.tabs input[type="radio"]:checked+.tab-item{/**導(dǎo)航選中狀態(tài)**/
  background:orangered;
  color:#fff
}
.tabs input[type="radio"]:checked+.tab-item+.tab-content{/**當(dāng)前內(nèi)容切換**/
  z-index:1
}

我們這里只用了z-index:1就實(shí)現(xiàn)了隱藏顯示,當(dāng)然還可以實(shí)現(xiàn)更多的效果,比如淡入淡出等

下面是演示效果

https://codepen.io/xboxyan/pe...

當(dāng)然,這種方式也有一定的不足,由于這里內(nèi)容區(qū)域用到了絕對(duì)定位,所以整個(gè)tab容器就不能根據(jù)里層的內(nèi)容來(lái)自適應(yīng),也需要給外層一個(gè)固定的高度,不然整個(gè)tab容器就只有頂部導(dǎo)航區(qū)域才占據(jù)空間,這明顯就不合常理。

添加一點(diǎn)動(dòng)畫效果
/**給導(dǎo)航添加橫條的縮放效果**/
.tab-item:after{
  position:absolute;
  content:"";
  height:3px;
  width:100%;
  background:orangered;
  left:0;
  bottom:2px;
  transition:.3s;
  transform:scaleX(0)
}

.tabs input[type="radio"]:checked+.tab-item:after{
  transform:scaleX(1)
}
/**給內(nèi)容區(qū)域添加一個(gè)淡入淡出的效果**/
.tab-content{
  position:absolute;
  background:#eee;
  padding:20px;
  left:0;
  top:36px;
  bottom:0;
  right:0;
  transition:.3s;
  opacity:0;
  transform:translateY(50px)
}

.tabs input[type="radio"]:checked+.tab-item+.tab-content{
  z-index:1;
  opacity:1;
  transform:translateY(0)
}

https://codepen.io/xboxyan/pe...

小節(jié)

通過(guò)css我們也能實(shí)現(xiàn)導(dǎo)航效果,而且更容易復(fù)用,只需要復(fù)制html結(jié)構(gòu)就行(當(dāng)然這里肯定也是需要改一下nameid的)。這就有點(diǎn)類似組件的意思了,給你一個(gè)html結(jié)構(gòu),你不需要關(guān)系切換邏輯,只需要根據(jù)接口取到數(shù)據(jù),然后塞到每個(gè)tab標(biāo)簽頁(yè)里面去,事實(shí)上現(xiàn)在react實(shí)現(xiàn)的組件也一般都是這種思路,只需關(guān)注業(yè)務(wù)邏輯,但這些都是大工程,哪里有css直接來(lái)的快。

這就讓我想到了剛進(jìn)公司那會(huì),每碰到一個(gè)tab,那就要取一個(gè)id,然后用jquery實(shí)現(xiàn)一遍tab切換邏輯,后來(lái)放聰明了,把tab封裝成一個(gè)插件,碰到一個(gè)tab就調(diào)用一次插件...看著代碼變少了,其實(shí)也沒什么本質(zhì)區(qū)別。

用css來(lái)實(shí)現(xiàn)的好處就是可以盡量大的把組件功能和業(yè)務(wù)邏輯分離開來(lái),真正做一個(gè)UI組件該做的事,希望css越來(lái)越好

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/116912.html

相關(guān)文章

  • 用純CSS實(shí)現(xiàn)優(yōu)雅的tab頁(yè)

    摘要:部分如上,四個(gè)區(qū)塊,四大名著,嘎嘎代碼如上,寫的很爛,輕噴用來(lái)控制元素的顯示和隱藏,實(shí)際上是為了實(shí)現(xiàn)動(dòng)畫效果此處有裝逼的嫌疑,因?yàn)闀?huì)阻礙,而不會(huì),另外也可以用來(lái)代替。 說(shuō)明 又是一個(gè)練手的小玩意兒,本身沒什么技術(shù)含量,就是幾個(gè)不常用的CSS3特性的結(jié)合而已。 要點(diǎn) Label標(biāo)簽的for屬性 單選框的:checked偽類 CSS的加號(hào)[+]選擇器 效果圖 showImg(https...

    lavnFan 評(píng)論0 收藏0
  • 用純CSS實(shí)現(xiàn)優(yōu)雅的tab頁(yè)

    摘要:部分如上,四個(gè)區(qū)塊,四大名著,嘎嘎代碼如上,寫的很爛,輕噴用來(lái)控制元素的顯示和隱藏,實(shí)際上是為了實(shí)現(xiàn)動(dòng)畫效果此處有裝逼的嫌疑,因?yàn)闀?huì)阻礙,而不會(huì),另外也可以用來(lái)代替。 說(shuō)明 又是一個(gè)練手的小玩意兒,本身沒什么技術(shù)含量,就是幾個(gè)不常用的CSS3特性的結(jié)合而已。 要點(diǎn) Label標(biāo)簽的for屬性 單選框的:checked偽類 CSS的加號(hào)[+]選擇器 效果圖 showImg(https...

    Ali_ 評(píng)論0 收藏0
  • CSS實(shí)現(xiàn)Tab頁(yè)切換效果

    摘要:綁定和這個(gè)不用說(shuō)和屬性綁定隱藏按鈕這個(gè)方法有很多充分發(fā)揮你們的想象力就可以了,我見過(guò)的方法有設(shè)置隱藏的設(shè)置絕對(duì)定位,將設(shè)置為很大的負(fù)值,移動(dòng)到頁(yè)面外達(dá)到隱藏效果設(shè)置絕對(duì)定位使元素脫離文檔流,然后設(shè)置為透明來(lái)達(dá)到隱藏效果。 用CSS實(shí)現(xiàn)Tab切換效果 最近切一個(gè)頁(yè)面的時(shí)候涉及到了一個(gè)tab切換的部分,因?yàn)椴幌胗胘s想著能不能用純CSS的選擇器來(lái)實(shí)現(xiàn)切換效果。搜了一下大致有下面三種寫法。 ...

    dayday_up 評(píng)論0 收藏0
  • CSS實(shí)現(xiàn)Tab頁(yè)切換效果

    摘要:綁定和這個(gè)不用說(shuō)和屬性綁定隱藏按鈕這個(gè)方法有很多充分發(fā)揮你們的想象力就可以了,我見過(guò)的方法有設(shè)置隱藏的設(shè)置絕對(duì)定位,將設(shè)置為很大的負(fù)值,移動(dòng)到頁(yè)面外達(dá)到隱藏效果設(shè)置絕對(duì)定位使元素脫離文檔流,然后設(shè)置為透明來(lái)達(dá)到隱藏效果。 用CSS實(shí)現(xiàn)Tab切換效果 最近切一個(gè)頁(yè)面的時(shí)候涉及到了一個(gè)tab切換的部分,因?yàn)椴幌胗胘s想著能不能用純CSS的選擇器來(lái)實(shí)現(xiàn)切換效果。搜了一下大致有下面三種寫法。 ...

    Warren 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<