<!DOCTYPE html>
<html>
<head>
<title>选项卡</title>
</head>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
margin:20px 20px;
}
ul li{
list-style: none;
}
#show{
height: 200px;
position: relative;
}
#show li{
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
left:0;
}
#dian{
width: 200px;
height:25px;
border: 1px solid #ccc;
margin-top:20px;
display: inline-block;
text-align: center;
}
#dian li{
/*float:left;*/
border: 1px solid #ccc;
margin-left: 5px;
width: 20px;
text-align: center;
border-radius: 50%;
display: inline-block;
}
</style>
<body>
<!-- 思路：
1:结构的基本搭建
2:样式的确定:显示第一张图片；
3:逻辑
1:点击事件：点击li图片进行对应的调整。
-->
<ul id="show">
<li>1</li>
<li style="display: none">2</li>
<li style="display: none">3</li>
</ul>
<ul id="dian">
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
<script type="text/javascript">
var Dli=document.getElementById('dian').getElementsByTagName('li');
var Sli=document.getElementById('show').getElementsByTagName('li');
for(var i=0;i<3;i++){
Dli[i].index=i;
Dli[i].onclick=function(){
// q清楚点击后的样式，方便巡回点击
for(var j=0;j<3;j++){
Dli[j].className=" ";
Sli[j].style.display="none";
}
// 点击后显示对应的图片
this.className="active";
// 对应的li的class变为active；为了上面的清楚准备。
Sli[this.index].style.display="block";
// 对应的显示
}
}
</script>
</html>
网友评论