纯 css 实现导航点击切换代码
HTML 代码:
<div > <div > <label for="tab1"> <input type="radio" id="tab1" name="tab" checked=""> <div > <span>tab1</span> </div> </label> <label for="tab2"> <input type="radio" id="tab2" name="tab"> <div > <span>tab2</span> </div> </label> <label for="tab3"> <input type="radio" id="tab3" name="tab"> <div > <span>tab3</span> </div> </label> </div> </div>
CSS 代码:
.rowWrapper { display:flex; flex-direction:row; justify-content:flex-start; align-items:center; } .colWrapper { display:flex; flex-direction:column; justify-content:flex-start; align-items:center; } input { display:none; } input:checked ~.labelText { background-color:#337ab7; color:#ffffff; /* border-bottom:2px solid black;*/ } .labelText { display:flex; flex-direction:row; justify-content:center; align-items:center; border-radius:4px; width:180px; height:40px; border-bottom:2px solid transparent; transition:background-color .5s,color .5s; } .labelText:hover { cursor:pointer; }