纯css+input实现导航点击切换代码
纯 css 实现导航点击切换代码
HTML 代码:
<div class="rowWrapper"> <div class="colWrapper"> <label for="tab1"> <input type="radio" id="tab1" name="tab" checked=""> <div class="labelText"> <span>tab1</span> </div> </label> <label for="tab2"> <input type="radio" id="tab2" name="tab"> <div class="labelText"> <span>tab2</span> </div> </label> <label for="tab3"> <input type="radio" id="tab3" name="tab"> <div class="labelText"> <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; }
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 纯css+input实现导航点击切换代码
码云笔记 » 纯css+input实现导航点击切换代码