想要实现点击右下角数字显示相应图片，请问哪里有问题
<!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>
Flzz浏览 1301回答 3
3回答
-
QQ_随意
你可以找一些關於“JS中for循环变量作用域”的資料看一下 -
QQ_随意
而且你也不用寫那麼多個<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>寫一個就可以了，然後當點擊數字顯示相應圖片，其他圖片消失就行 -
QQ_随意
<div class="box"> <!-- 左 --> <ul class="lef"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <!-- 右 --> <div class="rig"> <ul class="img"> <li><img src="img/1.jpg" alt="">1</li> <li><img src="img/2.jpg" alt="">2</li> <li><img src="img/3.jpg" alt="">3</li> <li><img src="img/4.jpg" alt="">4</li> </ul> <ul class="tab"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div></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++){ showImg(i);}function showImg(i) { oTab[i].onclick = function(){ oImg[i].className = "open"; }; } </script>
随时随地看视频慕课网APP
Html/CSS
JavaScript