Html
    Css
    Js

    
                        
* {
	padding:0;
	margin:0;
	list-style:none;
}
#box:after {
	content:"";
	display:block;
	clear:both;
}
#box {
	width:800px;
	border:1px solid black;
	margin:20px auto;
	background:blue;
}
#leftBox {
	width:200px;
	float:left;
}
#leftBox li {
	width:200px;
	height:89px;
	background:red;
	margin-bottom:2px;
	color:white;
	font:50px/89px "黑体";
	text-align:center;
}
#rightBox div {
	display:none;
	float:left;
	width:600px;
}
#rightBox p {
	width:100%;
	height:325px;
	font:100px/325px "黑体";
	text-align:center;
	background:greenyellow
}
#rightBox ul {
	width:600px;
	display:table;
}
#rightBox li {
	display:table-cell;
	background:purple;
	height:40px;
	border-right:2px solid blue;
	font:30px/40px "黑体";
	text-align:center;
	color:white;
}
#leftBox .active {
	background:yellow;
	color:black;
}
#rightBox .active {
	background:white;
	color:black;
}

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

实现tab切换

利用jq做的简易图片切换

0