Html
    Css
    Js

    
                        
  * {
	margin:0;
	padding:0;
}
.wap {
	position:relative;
	top:20px;
	left:50%;
	margin-left:-500px;
	width:700px; 
	overflow:hidden;
	background:black;
}
.items {
	float:left;
	position:relative;
	list-style:none;
	width:200px;
	z-index:3;
}
.items li {
	padding:30px 0;
	font-size:16px;
	color:#ffffff;
	text-align:center;
	cursor:pointer;
}
.mask {
	position:absolute;
	left:0;
	top:0;
	width:200px;
	height:78px;
	background:blue;
}
.items-cont {
	float:left;
}
.items-cont li img,h1 {
	display:none;
	position:absolute;
	left:200px;
	width:900px;
}
.items-cont li img {
	top:0;
	height:500px;
}
.items-cont li h1 {
	bottom:0;
	padding:16px 0;
	background:rgba(0,0,0,0.6);
	font-size:24px;
	font-weight:normal;
	color:#ffffff;
	text-align:left;
	text-indent:30px;
}
.items-cont li.active img,h3 {
	display:block;
}

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

页面常用选项卡

jquery常用选项卡设置

0