Html
    Css
    Js
/* CSS样式制作 */  
 * {
	padding:0px;
	margin:0px;
}
a {
	text-decoration:none;
	color:black;
}
a:hover {
	text-decoration:none;
	color:#336699;
}
#tab {
	width:270px;
	padding:5px;
	height:150px;
	margin:20px;
}
#tab ul {
	list-style:none;
	display:;
	height:30px;
	line-height:30px;
	border-bottom:2px #C88 solid;
}
#tab ul li {
	background:#FFF;
	cursor:pointer;
	float:left;
	list-style:none height:29px;
	line-height:29px;
	padding:0px 10px;
	margin:0px 10px;
	border:1px solid #BBB;
	border-bottom:2px solid #C88;
}
#tab ul li.on {
	border-top:2px solid gray;
	border-bottom:2px solid #FFF;
}
#tab div {
	height:100px;
	width:250px;
	line-height:24px;
	border-top:none;
	padding:1px;
	border:1px solid #336699;
	padding:10px;
}
.hide {
	display:none;
}

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

用html+css+js实现选项卡切换效果

先分析基本思路。首先编写HTML,然后再加载样式,最后用JS修改相应的DOM,达到更改选项卡和内容的目的。HTML显示的是所有与文字有关的信息

2
      ―+、柬。劫〈?0
      2017/9/23 18:23:59
      ?遇见就是缘0
      2017/9/7 22:13:28