tab 切換下劃線跟隨實現
阿新 • • 發佈:2018-12-10
<ul>
<li class="active">不可思議的CSS</li>
<li>導航欄</li>
<li>游標小下劃線跟隨</li>
<li>PURE CSS</li>
<li>Nav Underline</li>
</ul>
ul { display: flex; position: absolute; width: 800px; top: 50%; left: 50%; transform: translate(-50%, -50%); list-style: none; } li { position: relative; padding: 20px; color: #000; line-height: 1; transition: 0.2s all linear; cursor: pointer; } li::before { content: ""; position: absolute; top: 0; left: 100%; width: 0; height: 100%; border-bottom: 2px solid #000; transition: 0.2s all linear; }
劃過 tab 跟隨
li:hover::before {
width: 100%;
top: 0;
left: 0;
transition-delay: 0.1s;
border-bottom-color: #000;
}
li:hover ~ li::before {
left: 0;
}
li:active {
background: #000;
color: #fff;
}
不需要使用 js 即可實現劃過 tab 跟隨特效。
點選 tab 跟隨
結合 js 使用 active 類即可實現 點選 tab 跟隨
.active ~ li::before { left: 0; } .active::before { width: 100%; left: 0; top: 0; }
// 使用 jquery
$('li').on('click', function () {
$(this).addClass('active').siblings().removeClass('active')
})