Html
    Css
    Js


html,body {
	margin:0;
	padding:0;
}
.container {
	width:500px;
	height:300px;
	padding:0;
	margin:0 auto;
	position:relative;
	top:150px;
}
.top {
	height:40px;
}
.top ul {
	margin:0;
	padding:0;
	list-style:none;
	color:whitesmoke;
}
.top ul li {
	float:left;
	width:25%;
	text-align:center;
	line-height:40px;
	box-shadow:0 0 1px #ffba7d
}
.top ul li:nth-child(1) {
	background-color:#5ac7e7;
}
.top ul li:nth-child(2) {
	background-color:#a263ff;
}
.top ul li:nth-child(3) {
	background-color:#55ffb2;
}
.top ul li:nth-child(4) {
	background-color:#090908;
}
.bottom {
	height:252px;
	display:none;
}
.one {
	background-color:#5ac7e7;
}
.two {
	background-color:#a263ff;
}
.three {
	background-color:#55ffb2;
}
.four {
	background-color:#090908;
}
.active {
	display:block;
}
.text-no-select {
	-moz-user-select:none;
	/*火狐*/
    -webkit-user-select:none;
	/*webkit瀏覽器*/
    -ms-user-select:none;
	/*IE10*/
    user-select:none;
}

↑上面代碼改變,會自動顯示代碼結果 jQuery調用版本:2.1.4
 立即下載

超級簡單的jQuery tab切換

2019山东十一选五杀号 www.xvcvn.com 更新時間:2019-11-20 00:57:28

提供一個超級簡單的div切換雛形,可以進行二次開發

0