アニメーションをつけてみました。
HTML
<div class="box"> <ul data-index="0" data-length="2" class="btns"> <li data-index="0" class="btn">LEFT</li> <li data-index="1" class="btn">RIGHT</li> </ul> <ul data-index="0" data-length="3" class="btns"> <li data-index="0" class="btn">LEFT</li> <li data-index="1" class="btn">CENTER</li> <li data-index="2" class="btn">RIGHT</li> </ul> </div>
SCSS
.box { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 600px; height: 150px; } .btns { position: relative; margin: auto; height: 50px; overflow: hidden; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); &[data-length="2"] { width: 400px; &:before { width: 50%; } &:after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 1px; background: #000; } &[data-index="0"] { &:before { left: 0; } } &[data-index="1"] { &:before { left: 50%; } } } &[data-length="3"] { margin-top: 50px; width: 600px; &:before { width: 33.33%; } &:after { margin: auto; border-left: solid 1px #000; border-right: solid 1px #000; width: 33.33%; } &[data-index="0"] { &:before { left: 0; } } &[data-index="1"] { &:before { left: 33.33%; } } &[data-index="2"] { &:before { left: 66.66%; } } } .btn { float: left; width: 200px; height: 50px; font: bold 34px "Helvetica"; line-height: 50px; text-align: center; cursor: pointer; transition: color .15s ease-in-out; } &:before { display: block; position: absolute; top: 0; bottom: 0; content: ""; background: #7f7f7f; z-index: -1; transition: left .15s ease-in-out; } &:after { display: block; margin: auto; height: 50px; content: ""; } &[data-index="0"] { [data-index="0"] { color : #fff; } } &[data-index="1"] { [data-index="1"] { color : #fff; } } &[data-index="2"] { [data-index="2"] { color : #fff; } } }
JavaScript
var btns = document.querySelectorAll(".btns"); for (let i = 0, length = btns.length; i < length; ++i) { btns[i].addEventListener("click", function(evt) { var index = evt.target.getAttribute("data-index"); this.setAttribute("data-index", index); }); }