<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0px;
padding:0px;
list-style: none;
}
.image li{
display: none;
}
.image .active{
display: block;
}
.item li{
width:150px;
height:40px;
list-style: none;
line-height:40px;
text-align:center;
background:pink;
border:1px solid white;
float:left;
}
.item:after{
content:"";
display:block;
width:100%;
height:0px;
clear:both;
}
img{
width:608px;
height:300px;
display: block;
}
</style>
</head>
<body>
<ul id="item" class="item">
<li id="0">1/li>
<li id="1">2</li>
<li id="2">3</li>
<li id="3">4</li>
</ul>
<ul id="image" class="image">
<li class="active"><img src="1.jpeg" alt=""></li>
<li><img src="2.jpeg" alt=""></li>
<li><img src="3.jpeg" alt=""></li>
<li><img src="4.jpeg" alt=""></li>
</ul>
<!--图片地址可以替换 -->
</body>
</html>
<script>
var items = item.getElementsByTagName('li');
var li = image.getElementsByTagName('li')
for( i = 0; i < items.length; i++ ){
items[i].onclick = function(){
for(i=0;i<items.length;i++){
li[i].style.display = 'none'
}
li[this.id].style.display='block'
}
}
</script>
选项卡
发布于 2021-09-16 414 次阅读
Comments NOTHING