Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
}
header {
	width:100%;
	height:96px;
	border:2px solid;
	text-align:center;
}
header h1 {
	margin-top:29px;
	font-weight:400;
}
nav {
	width:100%;
	height:498px;
	border:1px solid;
	margin-top:5px;
}
nav > ul {
	list-style-type:none;
	background-color:#cfcfcf;
	height:50px;
	overflow:hidden;
}
nav > ul > li {
	background-color:#1e90ff;
	border:2px solid #0b5eb1;
	box-shadow:0 3px #999;
	color:#fff;
	font-family:"Courier New",Courier,monospace;
	font-weight:800;
	font-size:20px;
	float:left;
	width:8em;
	padding:6px;
	margin-top:5px;
	text-align:center;
	cursor:pointer;
	user-select:none;
}
nav > ul > li:first-child {
	margin-left:10px;
	border-bottom-left-radius:25px;
}
nav > ul > li:last-child {
	border-top-right-radius:25px;
}
nav > ul > li.active {
	border:2px solid#0b5eb1;
	color:#1e90ff;
	background-color:#fff;
	box-shadow:0 2px #666;
	transform:translateY(3px);
	-webkit-transform:translateY(3px);
	-moz-transform:translateY(3px);
	-ms-transform:translateY(3px);
	-o-transform:translateY(3px);
}
nav > ul > li.btn1:hover {
	border:2px solid#0453a1;
	color:#f8f8f8;
	font-weight:bolder;
	background-color:rgb(9,134,218);
}
nav > ul > li.btn2:hover {
	border:2px solid#880467;
	color:#42da7c;
	font-weight:bolder;
	background-color:rgb(255,0,212);
}
nav > ul > li.btn3:hover {
	border:2px solid#037428;
	color:#db611b;
	font-weight:bolder;
	background-color:rgb(9,175,36);
}
nav > ul > li.btn4:hover {
	border:2px solid#921606;
	color:#eaff2f;
	font-weight:bolder;
	background-color:rgb(255,17,0);
}
nav > ul > li.btn5:hover {
	border:2px solid#7a5b04;
	color:#0575a1;
	font-weight:bolder;
	background-color:rgb(255,145,0);
}
nav > div {
	position:absolute;
	border:1px solid black;
	width:0px;
	height:0px;
	transition:width 1s,height 1s;
	text-align:center;
	/* opacity:0;
	*/
}
nav > div.show {
	width:100%;
	height:448px;
	/* opacity:1;
	*/
}
div h1 {
	font-size:38px;
	margin-top:180px;
	font-weight:600;
	color:#fff;
	opacity:0;
}
div h1.showh1 {
	font-size:38px;
	margin-top:180px;
	font-weight:600;
	color:#fff;
	opacity:1;
}

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

js选项卡过渡div(原创)

更新时间:2021-04-24 23:54:24

0