39,107
社区成员
发帖
与我相关
我的任务
分享
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.box1 ul{
list-style: none;
}
.box1 ul li {
display: inline-block;
}
.box1 ul li a{
text-decoration: none;
transition: all 1s;
}
.line{
border-top: 2px solid rgb(42, 146, 70);
width: 20px;
transition: all 0.2s;
display: none;
/*transform: translateX();*/
}
.active{
background-color: red;
display: block;
border-top: 4px solid rgb(42, 146, 70);;
}
img{width: 200px;
height: 200px;}
</style>
</head>
<body>
<div class="box1"><ul>
<!-- 点击a链接不跳转 -->
<li><a href="javascript:;"id="1" class="a">12</a></li>
<li><a href="javascript:;"id="2" class="b">33</a></li>
<li><a href="javascript:;"id="3" class="c">44</a></li>
<li><a href="javascript:;"id="4" class="d">55</a></li>
<div class="line"></div>
</ul></div>
<div class="box2">
<ul >
<li><img src="1.jpg" alt=""style="display: none;"></li>
<li><img src="2.jpg" alt="" style="display: none;"></li>
<li><img src="3.jpg" alt=""style="display: none;"></li>
<li><img src="4.jpg" alt=""style="display: none;"></li>
</ul>
</div>
<script>
let img = document.querySelectorAll(".box2 ul li img");
let ul =document.querySelector(".box1 ul");
let line=document.querySelector(".line");
line.style.backgroundcolor="green";
ul.addEventListener("click",function(e){
if(e.target.tagName==="A"){
console.log(e.target.offsetLeft);
console.log(e.target.clientLeft);
console.log(e.target.scrollWidth);
// 利用offsetleft左边距来移动line元素
line.classList.add("active");
line.style.transform=`translateX(${e.target.offsetLeft}px)`;
}
})
ul.addEventListener("click",function(event){
if(event.target.id="1"){
img[0].style.display="block"
img[1].style.display="none"
img[2].style.display="none"
img[3].style.display="none"
console.log("1");
}
if(event.target.id="2"){
img[1].style.display="block"
img[0].style.display="none"
img[2].style.display="none"
img[3].style.display="none"
console.log("2");
}
if(event.target.id="3"){
img[2].style.display="block"
img[0].style.display="none"
img[1].style.display="none"
img[3].style.display="none"
console.log("3");
}
if(event.target.id="4"){
img[3].style.display="block";
img[0].style.display="none";
img[1].style.display="none";
img[2].style.display="none";
}
})
</script>
</body>
</html>
1
判断event.target.id条件那里用的是==,你写少了一个等于,加上问题就解决了。
而且我个人觉得,这样写不好