Html
    Css
    Js

    
                        
* {
	text-align:center;
}
.tou {
	width:600px;
	margin:0 auto;
	overflow:hidden;
}
.tou>div {
	width:18%;
	height:60px;
	background:red;
	display:inline-block;
	vertical-align:top;
}
.tou>span {
	display:block;
	width:100%;
	height:600px;
	position:relative;
}
.tou>span>div {
	width:100%;
	height:100%;
	position:absolute;
}
.d2 {
	transition:.5s;
}
.tou>div:hover {
	background-color:yellow;
}
.tou>div:nth-of-type(2):hover ~ .d2 {
	transform:translateX(-100%);
}
.tou>div:nth-of-type(3):hover ~ .d2 {
	transform:translateX(-200%);
}
.tou>div:nth-of-type(4):hover ~ .d2 {
	transform:translateX(-300%);
}
.tou>div:nth-of-type(5):hover ~ .d2 {
	transform:translateX(-400%);
}

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

纯css的tab栏切换代码

更新时间:2022-02-14 00:34:27

0