[已解决]为啥a设置绝对定位后不能锚点链接，但是li可以

杜家二少 · 发表于 2021-4-19 15:20:22

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="reset.css">
<style>
.box{
width: 806px;
height: 592px;
margin: 100px auto;
}
.three{
width: 806px;
height: 507px;
position: relative;
}
/* 此处若是给A设置position就不会跳转锚点链接 */
.three li {
position: absolute;
left: 0;
top: 0;
}
img{
display: block;
}
.two{
margin-top: 5px;
}
.two>li{
float: left;
margin-right: 5px;
}
.three li:target{
z-index: 2;
}
</style>
</head>
<body>
<div class="box">
<ul class="three">
<li id="jd01"><a href=""><img src="img/jd001.jpg" width: "806px" ; height="507px"></a></li>
<li id="jd02"><a href=""><img src="img/jd002.jpg" width: "806px" ; height="507px"></a></li>
<li id="jd03"><a href=""><img src="img/jd003.jpg" width: "806px" ; height="507px"></a></li>
<li id="jd04"><a href=""><img src="img/jd004.jpg" width: "806px" ; height="507px"></a></li>
<li id="jd05"><a href=""><img src="img/jd005.jpg" width: "806px" ; height="507px"></a></li>
<li id="jd06"><a href=""><img src="img/jd006.jpg" width: "806px" ; height="507px"></a></li>
</ul>
<ul class="two">
<li ><a href="#jd01"><img src="img/jd001.jpg" width: "130" ; height="80px"></a></li>
<li ><a href="#jd02"><img src="img/jd002.jpg" width: "130" ; height="80px"></a></li>
<li ><a href="#jd03"><img src="img/jd003.jpg" width: "130" ; height="80px"></a></li>
<li ><a href="#jd04"><img src="img/jd004.jpg" width: "130" ; height="80px"></a></li>
<li ><a href="#jd05"><img src="img/jd005.jpg" width: "130p ; height="80px"></a></li>
<li style="margin: 0;"><a href="#jd06"><img src="img/jd006.jpg" width: "130px" ; height="80px"></a></li>
</ul>
</div>
</body>
</html>

复制代码

最佳答案

艾利克斯

2021-5-11 05:00:41

这样可不可行？

<ul class="three">
<li id="jd01"><a href=""><img src="img/jd001.jpg" width: "806px" ; height="507px"></a></li>
<li id="jd02"><a href=""><img src="img/jd002.jpg" width: "806px" ; height="507px"></a></li>
<li id="jd03"><a href=""><img src="img/jd003.jpg" width: "806px" ; height="507px"></a></li>
<li id="jd04"><a href=""><img src="img/jd004.jpg" width: "806px" ; height="507px"></a></li>
<li id="jd05"><a href=""><img src="img/jd005.jpg" width: "806px" ; height="507px"></a></li>
<li id="jd06"><a href=""><img src="img/jd006.jpg" width: "806px" ; height="507px"></a></li>
</ul>

复制代码

跳转到最佳答案楼层

本帖寻求最佳方案

，目前已有 2 个回复我要奖励

破鱼 · 发表于 2021-5-4 02:44:46

你有一个问题与你的风格和你添加样式的所有内容类3和6图片上彼此,然后“a”标记的href你给是空所以你点击它,它不会跳,但刷新页面

艾利克斯 · 发表于 2021-5-11 05:00:41

这样可不可行？

<ul class="three">
<li id="jd01"><a href=""><img src="img/jd001.jpg" width: "806px" ; height="507px"></a></li>
<li id="jd02"><a href=""><img src="img/jd002.jpg" width: "806px" ; height="507px"></a></li>
<li id="jd03"><a href=""><img src="img/jd003.jpg" width: "806px" ; height="507px"></a></li>
<li id="jd04"><a href=""><img src="img/jd004.jpg" width: "806px" ; height="507px"></a></li>
<li id="jd05"><a href=""><img src="img/jd005.jpg" width: "806px" ; height="507px"></a></li>
<li id="jd06"><a href=""><img src="img/jd006.jpg" width: "806px" ; height="507px"></a></li>
</ul>

复制代码

		自动登录	找回密码
密码			立即注册