今天时间不够，就只做了一个小的特效，编写选项卡，这是之前写过的，但是过去很久了，所以重新回顾一下，然后今天在网上看到一个效果比较好看的选项卡，就想写个博客更出来
实现效果如图
不会在博客里面插入动图，就只能一张图片一张图片的截，这样看的会更清楚
完整代码如下
实现过程都写在代码注释里
css部分
<style type="text/css"> //css样式完成之后的布局效果就如上图所示
/* CSS样式制作 */
body{
position:relative;
}
.clearfix:before,.clearfix:after{
display:table;
content:"";
}
.clearfix:after{
clear:both;
}
ul{
width:300px;
height:27px;
margin:0;
padding:0;
position: absolute;
left:0;
top:0;
border-bottom:#346367 2px solid;
}
ul li{
list-style:none;
border:#cccccc 1px solid;
width:50px;
height:25px;
text-align:center;
line-height:25px;
float:left;
margin-right:5px;
border-bottom:none;
cursor:pointer;
}
ul li.on{ /*设置点击li时的样式*/
border-top:#346367 2px solid;
border-bottom: 2px solid #ffffff;
}
ul li.off{ /*设置li没有被点击时的样式*/
border-top:#cccccc 1px solid;
}
div{
width:288px;
height:150px;
padding:5px;
border:lightblue 1px solid;
border-top:none;
position:absolute;
top:25px;
font-size:12px;
}
.div1{
display:block;
}
.div2{
display:none;
}
</style>
html部分
<body>
<!-- HTML页面布局 -->
<ul class="clearfix">
<li class="on">房产</li>
<li class="off">家居</li>
<li class="off">二手房</li>
</ul>
<div class="div1">
<p>275万购昌平邻铁三居 总价20万买一居</p>
<p>200万内购五环三居 140万安家东三环</p>
<p>北京首现零首付楼盘 53万购东5环50平</p>
<p>京楼盘直降5000 中信府 公园楼王现房</p>
</div>
<div class="div2">
<p>40平出租屋大改造 美少女的混搭小窝</p>
<p>经典清新简欧爱家 90平老房焕发新生</p>
<p>新中式的酷色温情 66平撞色活泼家居</p>
<p>瓷砖就像选好老婆 卫生间烟道的设计</p>
</div>
<div class="div2">
<p>通州豪华3居260万 二环稀缺2居250w甩</p>
<p>西3环通透2居290万 130万2居限量抢购</p>
<p>黄城根小学学区仅260万 121平70万抛!</p>
<p>独家别墅280万 苏州桥2居优惠价248万</p>
</div>js部分
<script type="text/javascript">
// JS实现选项卡切换
var aInput = document.querySelectorAll("li"); //用css3里的模拟jq的选择器
var aDiv = document.querySelectorAll("div");
function clickLi(obj,i){
obj.onclick = function(){
//在把点击时的li的样式变为on时，先把所有的li的样式设置为off
for(var j=0;j<aInput.length;j++){
aInput[j].className = "off";
aDiv[j].className = "div2";
}
obj.className = "on";
aDiv[i].className="div1";
}
}
for(var i=0;i<aInput.length;i++){ //循环遍历函数
clickLi(aInput[i],i);
}
</script>