一般tab選項(xiàng)卡切換需要使用JS醉鳖，但利用css中的focus錨點(diǎn)定位和overflow也能實(shí)現(xiàn)！
.box {
height: 10em;
border: 1px solid #ddd;
overflow: hidden;
}
.list {
height: 100%;
background: #ddd;
position: relative;
}
.list > input {
position: absolute;
top: 0;
height: 100%;
width: 1px;
border: 0;
padding: 0;
margin: 0;
clip: rect(0 0 0 0);
}
<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>
image.png
原理其實(shí)很簡單哮内，就是在每個(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í)現(xiàn)的選項(xiàng)卡還有一個(gè)優(yōu)點(diǎn)就是，我們可以直接使用 Tab 鍵來切換狱庇、瀏覽各個(gè)選 項(xiàng)面板的內(nèi)容惊畏，傳統(tǒng)的選項(xiàng)卡實(shí)現(xiàn)并沒有如此便捷的可訪問性。
然而密任，上面這種技術(shù)要想用在實(shí)際項(xiàng)目中還離不開 JavaScript 的支持陕截，一個(gè)是選項(xiàng)卡按鈕 的選中效果，另一個(gè)就是處理列表部分區(qū)域在瀏覽器外面時(shí)依然會(huì)跳動(dòng)的問題批什。
關(guān)鍵詞：input农曲、label、overflow: hidden;
引用來自：張鑫旭
