Html
    Css
    Js

    
                        
body {
	margin:0;
	font-size:12px;
	background:#666;
}
#box {
	width:400px;
	height:300px;
	margin:100px auto 0;
	border:1px dashed cyan;
}
#tab_nav {
	margin:0;
	padding:0;
	height:25px;
	line-height:24px;
}
#tab_nav li {
	float:left;
	margin:0 3px;
	list-style:none;
	border:1px solid #999;
	border-bottom:none;
	height:24px;
	width:60px;
	text-align:center;
	background:#FFF;
}
a {
	font:bold 14px/24px "微软雅黑",Verdana,Arial,Helvetica,sans-serif;
	color:green;
	text-decoration:none;
}
a:hover {
	color:red;
}
#tab_content {
	width:398px;
	height:273px;
	border:1px solid #999;
	font:bold 4em/273px "微软雅黑",Verdana,Arial,Helvetica,sans-serif;
	text-align:center;
	background:#FFF;
	overflow:hidden;
}
#t_1,#t_2,#t_3 {
	width:100%;
	height:273px;
}
p {
	background:red;
	float:left;
}

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

纯CSS样式实现TAB切换

本文档利用HTML+CSS实现tab切换效果,无需任何JS逻辑

0