CSS實現簡單的選項卡切換效果（附程式碼）

這篇文章帶給大家的內容是關於CSS實現簡單的選項卡切換效果（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

利用錨點的想法可以實現一個簡單的選項卡切換效果。

頁面佈局及樣式：

<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
<div>
  <a>1</a>
  <a>2</a>
  <a>3</a>
  <a>4</a>
</div> 

......

.box {
   height: 10em;
   border: 1px solid #ddd;
   overflow: hidden;
}
.list {
   line-height: 10em;
   background: #ddd;
}

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

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

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

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

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

<div>
    <div>
<input>1</div>
    <div>
<input>2</div>
    <div>
<input>3</div>
    <div>
<input>4</div>
</div>
<div>
    <label>1</label>
    <label>2</label>
    <label>3</label>
    <label>4</label>
</div>

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

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

$('label.click').removeAttr('for').on('click', function() { $('.box').scrollTop(xxx); 'xxx'表示滚动数值
});

以上是CSS實現簡單的選項卡切換效果（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！