body部分
<body>
<div class="box" id="box">
<div class="hd">
<span class="current">微信</span>
<span>qq</span>
<span>微博</span>
<span>淘宝</span>
</div>
<div class="bd">
<ul>
<li class="current">这里是微信部分</li>
<li class="current">这里是qq部分</li>
<li class="current">这里是微博部分</li>
<li class="current">这里是淘宝部分</li>
</ul>
</div>
</div>
</body>
css样式部分
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
.box{
width:398.5px;
height:300px;
border:1px solid #ccc;
margin:100px auto;
overflow:hidden;
}
.hd{
height:45px;
}
.hd span{
display:inline-block;
width:96px;
background-color:pink;
line-height:45px;
text-align:center;
cursor:pointer;
}
.hd span.current{
background-color:plum;
}
.bd li{
height:255px;
background-color:plum;
display:none;
}
.bd li.current{
display:block;
}
js部分
//先获取最外面的div
var box=document.getElementById("box");
//获取里面的第一个div
var hd=box.getElementsByTagName("div")[0];
//获取里面的第二个div
var hd=box.getElementsByTagName("div")[1];
//获取所有的span标签
var spans=hd.getElementsByTagName("span");
//获取所有的li标签
var list=bd.getElementsByTagName("li");
//循环遍历的方式给span标签添加点击事件
for(var i=0;i<spans.length;i++){
//在点击之前就把索引保存在span标签中
spans[i].setAttribute("index",i);
spans[i].onclick=function(){
//第一件事将所有的span的类样式全部移除
for(var j=0;j<spans.length;j++){
spans[i].removeAttribute("class");
}
//第二件事给当前被点击的span应用类样式
this.className="current";
//span被点击的时候获取存储的索引值
var num=this.getAttribute("index");
//移除所有li标签的类样式
for(var k=0;k<list.length;k++){
list[k].removeAttribute("class");
}
//给当前被点击的span标签应用类样式
list[num].className="current";
};
}
868
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
