簡單的選項卡切換效果

利用錨點的思想能夠實現一個簡單的選項卡切換效果。
頁面佈局及樣式：

<div class="box">
  <div class="list" id="one">1</div>
  <div class="list" id="two">2</div>
  <div class="list" id="three">3</div>
  <div class="list" id="four">4</div>
</div>
<div class="link">
  <a href="#one">1</a>
  <a href="#two">2</a>
  <a href="#three">3</a>
  <a href="#four">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 class="box">
    <div class="list"><input id="one">1</div>
    <div class="list"><input id="two">2</div>
    <div class="list"><input id="three">3</div>
    <div class="list"><input id="four">4</div>
</div>
<div class="link">
    <label class="click" for="one">1</label>
    <label class="click" for="two">2</label>
    <label class="click" for="three">3</label>
    <label class="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世界第6章