Html
    Css
    Js

    
                        
.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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

原生input实现导航

更新时间:2021-11-11 00:09:26

0