<!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>
3 回答
QQ_随意
TA贡献51条经验 获得超28个赞
而且你也不用寫那麼多個
<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_随意
TA贡献51条经验 获得超28个赞
<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>
添加回答
举报
0/150
提交
取消