CSS如何實(shí)現(xiàn)簡(jiǎn)單的選項(xiàng)卡切換效果

這篇文章將為大家詳細(xì)講解有關(guān)CSS如何實(shí)現(xiàn)簡(jiǎn)單的選項(xiàng)卡切換效果，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

　　頁面布局及樣式：

　　<divclass="box">

　　<divclass="list"id="one">1</div>

　　<divclass="list"id="two">2</div>

　　<divclass="list"id="three">3</div>

　　<divclass="list"id="four">4</div>

　　</div>

　　<divclass="link">

　　<ahref="#one">1</a>

　　<ahref="#two">2</a>

　　<ahref="#three">3</a>

　　<ahref="#four">4</a>

　　</div>

　　......

　　.box{

　　height:10em;

　　border:1pxsolid#ddd;

　　overflow:hidden;

　　}

　　.list{

　　line-height:10em;

　　background:#ddd;

　　}

　　容器設(shè)置了overflow:hidden，且每個(gè)列表高度和容器的高度一樣高，這樣保證永遠(yuǎn)只顯示一個(gè)列表。當(dāng)我們點(diǎn)擊按鈕，如第三個(gè)按鈕，會(huì)改變URL地址的錨鏈為#three，從而觸發(fā)id為three的第三個(gè)列表發(fā)生的錨點(diǎn)定位，也就是改變?nèi)萜鳚L動(dòng)高度讓列表3的上邊緣和滾動(dòng)容器上邊緣對(duì)齊，從而實(shí)現(xiàn)選項(xiàng)卡效果。

　　3372313660-5bfce3b04c4e2_articlex.png

　　但是這種方式有一定的不足之處：

　　其一，容器高度需要固定;

　　其二，錨點(diǎn)定位會(huì)觸發(fā)窗體的重定位，也就是如果頁面可以滾動(dòng)，那么點(diǎn)擊選項(xiàng)頁面也會(huì)發(fā)生跳動(dòng)

　　為了改變這種情況，下面利用下面的方式。頁面布局為:

　　<divclass="box">

　　<divclass="list"><inputid="one">1</div>

　　<divclass="list"><inputid="two">2</div>

　　<divclass="list"><inputid="three">3</div>

　　<divclass="list"><inputid="four">4</div>

　　</div>

　　<divclass="link">

　　<labelclass="click"for="one">1</label>

　　<labelclass="click"for="two">2</label>

　　<labelclass="click"for="three">3</label>

　　<labelclass="click"for="four">4</label>

　　</div>

　　這樣寫就算頁面窗體就有滾動(dòng)條，絕大多數(shù)情況下，也都不會(huì)發(fā)生跳動(dòng)現(xiàn)象。其原理就是在每個(gè)列表里塞入一個(gè)肉眼看不見的<input>輸入框，然后選項(xiàng)卡按鈕變成<label>元素，并通過for屬性與<input>輸入框的id相關(guān)聯(lián)，這樣，點(diǎn)擊選項(xiàng)按鈕會(huì)觸發(fā)輸入框的focus行為，觸發(fā)錨點(diǎn)定位，實(shí)現(xiàn)選項(xiàng)卡切換效果。

　　但是上面這種技術(shù)要想用在實(shí)際項(xiàng)目中還離不開JavaScript的支持，一個(gè)是選項(xiàng)卡按鈕的選中效果，另一個(gè)就是處理列表部分區(qū)域在瀏覽器外面時(shí)依然會(huì)跳動(dòng)的問題。

　　相關(guān)處理類似下面的做法，使用jQuery語法:

　　$('label.click').removeAttr('for').on('click',function(){$('.box').scrollTop(xxx);'xxx'表示滾動(dòng)數(shù)值

　　});

關(guān)于“CSS如何實(shí)現(xiàn)簡(jiǎn)單的選項(xiàng)卡切換效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。