CSS如何實現簡單的選項卡切換效果

這篇文章將為大家詳細講解有關CSS如何實現簡單的選項卡切換效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

　　頁面布局及樣式：

　　<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;

　　}

　　容器設置了overflow:hidden，且每個列表高度和容器的高度一樣高，這樣保證永遠只顯示一個列表。當我們點擊按鈕，如第三個按鈕，會改變URL地址的錨鏈為#three，從而觸發id為three的第三個列表發生的錨點定位，也就是改變容器滾動高度讓列表3的上邊緣和滾動容器上邊緣對齊，從而實現選項卡效果。

　　3372313660-5bfce3b04c4e2_articlex.png

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

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

　　其二，錨點定位會觸發窗體的重定位，也就是如果頁面可以滾動，那么點擊選項頁面也會發生跳動

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

　　<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>

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

　　但是上面這種技術要想用在實際項目中還離不開JavaScript的支持，一個是選項卡按鈕的選中效果，另一個就是處理列表部分區域在瀏覽器外面時依然會跳動的問題。

　　相關處理類似下面的做法，使用jQuery語法:

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

　　});

關于“CSS如何實現簡單的選項卡切換效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。