<!DOCTYPE?html>
<html>
<head>
<meta?charset='UTF-8'>
<title></title>
<style?type="text/css">
*{
margin:?0;
padding:?0;
}
a{
text-decoration:?none;
}
ul{
list-style:?none;
}
.box{
position:?relative;
border:?1px?solid?blue;
width:?500px;
height:?300px;
}
.box?.lef{
position:?absolute;
top:?0;
left:?0;
width:?20px;
height:?100px;
border:?1px?solid?blue;
}
.box?.lef>li{
width:?20px;
height:?20px;
text-align:?center;
line-height:?20px;
background:?#000;
color:?#fff;
margin-bottom:?5px;
}
.box?.rig{
position:?absolute;
top:?0;
left:?20px;
width:?480px;
height:?300px;
border:?1px?solid?red;
}
.box?.rig?.list?.img?li{
display:?none;
position:?absolute;
top:?0;
left:?0;
}
.box?.rig?.list?.img?li.open{
display:?block;
}
.box?.rig?.tab{
position:?absolute;
bottom:?0;
right:?0;
width:?100px;
height:?20px;
border:?1px?solid?red;
}
.box?.rig?.tab?li{
width:?20px;
height:?20px;
margin-right:?5px;
text-align:?center;
line-height:?20px;
background:?#000;
color:?#fff;
float:?left;
cursor:?pointer;
}
</style>
</head>
<body>
<div?class="box">
<!--?左?-->
<ul?class="lef">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<!--?右?-->
<ul?class="rig">
<li?class="list">
<ul?class="img">
<li><img?src="img/1.jpg"?alt=""></li>
<li><img?src="img/2.jpg"?alt=""></li>
<li><img?src="img/3.jpg"?alt=""></li>
<li><img?src="img/4.jpg"?alt=""></li>
</ul>
<ul?class="tab">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
<li?class="list">
<ul>
<li><img?src=""?alt=""></li>
<li><img?src=""?alt=""></li>
<li><img?src=""?alt=""></li>
<li><img?src=""?alt=""></li>
</ul>
<ul?class="tab">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
<li?class="list">
<ul>
<li><img?src=""?alt=""></li>
<li><img?src=""?alt=""></li>
<li><img?src=""?alt=""></li>
<li><img?src=""?alt=""></li>
</ul>
<ul?class="tab">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
<li>
<ul>
<li><img?src=""?alt=""></li>
<li><img?src=""?alt=""></li>
<li><img?src=""?alt=""></li>
<li><img?src=""?alt=""></li>
</ul>
<ul?class="tab">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
</ul>
</ul>
</div>
<script>
var?oTab?=?document.getElementsByClassName('tab')[0].getElementsByTagName('li'),
oImg?=?document.getElementsByClassName("img")[0].getElementsByTagName("li"),
length?=?oTab.length;
for(var?i=0;?i<length;?i++){
oTab[i].onclick?=?function(){
oImg[i].className?=?"open";
};
}
</script>
</body>
</html>
想要實(shí)現(xiàn)點(diǎn)擊右下角數(shù)字顯示相應(yīng)圖片，請(qǐng)問哪里有問題
Flzz
2018-01-04 11:10:36
