const ul = document.querySelector('.tab-click-box'); const aLi = ul.querySelectorAll('li'); let cIndex = -1; aLi.forEach((item, index) => { item.onclick = function () { console.log('click'); item.classList.add('active'); if (cIndex > -1 && cIndex !== index) { aLi[cIndex].className = 'tab-box-item' } cIndex = index; } })
<div class="box"> <div> <p class="title">hover</p> <div class="tab-hover"> <ul class="tab-box tab-hover-box"> <li class="tab-box-item">tab1</li> <li class="tab-box-item">tab2</li> <li class="tab-box-item">tab3</li> <li class="tab-box-item">tab4</li> <li class="tab-box-item">tab5</li> </ul> </div> </div> <div> <p class="title">click</p> <div class="tab-click"> <ul class="tab-box tab-click-box"> <li class="tab-box-item">tab1</li> <li class="tab-box-item">tab2</li> <li class="tab-box-item">tab3</li> <li class="tab-box-item">tab4</li> <li class="tab-box-item">tab5</li> </ul> </div> </div> <div> 从中间展开 after 加 margin: auto 即可从中间展开 </div> </div>
* { margin: 0; padding: 0; } li { list-style: none; } .box { margin-top: 200px; } .box > div { margin: 200px 0 } .tab-hover, .tab-click { margin: auto; width: 60%; } .tab-box { display: flex; } .tab-box-item { width: 20%; text-align: center; color: #909399; position: relative; } .tab-box-item:after { content: ""; position: absolute; left: 100%; width: 0; bottom: 0; height: 2px; background-color: #00adb5; transition: all .4s; } .tab-hover-box li:hover, .active { color: #00adb5; } .tab-hover-box li:hover ~:after, .active ~:after { left: 0; } .tab-hover-box li:hover:after, .active:after { left: 0; width: 100%; transition-delay: .1s; } .title { padding-left: 30px; font-size: 12px; color: #ddd; }