带有锚点的导航网络答案

【问题标题】：Navigation Web with anchors带有锚点的导航网络
【发布时间】：2016-08-11 17:12:56
【问题描述】：

我目前正在这个网站上工作：

body {
  margin: 0;
  overflow: hidden;
}
.AbsoluteBack {
  height: 100vh;
  text-align: center;
  background-color: #ccc;
}
.AbsoluteBack img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}
.LinkLeft {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
}
.LinkRight {
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: 100%;
}

<div id="1" class="AbsoluteBack">
  <img src="http://kingofwallpapers.com/images/images-169.jpg">
  <a href="#3">
    <div class="LinkLeft"></div>
  </a>
  <a href="#2">
    <div class="LinkRight"></div>
  </a>
</div>
<div id="2" class="AbsoluteBack">
  <img src="http://www.w3schools.com/css/trolltunga.jpg">
  <a href="#1">
    <div class="LinkLeft"></div>
  </a>
  <a href="#3">
    <div class="LinkRight"></div>
  </a>
</div>
<div id="3" class="AbsoluteBack">
  <img src="http://www.pnas.org/site/misc/images/15-04709.500.jpg">
  <a href="#2">
    <div class="LinkLeft"></div>
  </a>
  <a href="#1">
    <div class="LinkRight"></div>
  </a>
</div>

问题是，如果我在绝对位置上左右导航，只有第一张图片能正确获得链接。

有什么建议吗？（如果可能的话，只有 css 更好）

【问题讨论】：

jsfiddle.net/f6uzudex jsFiddle 这里
我如何每次都将它们放在图像上？

标签： css html

【解决方案1】：

试试这个

.AbsoluteBack{position:relative;}

Demo

【讨论】：

【解决方案2】：

最好和最简单的方法是用一点点javascript来制作它。

看看这个：

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
    showDivs(slideIndex += n);
}

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("java_action");
    if (n > x.length) {slideIndex = 1} 
    if (n < 1) {slideIndex = x.length} ;
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none"; 
    }
    x[slideIndex-1].style.display = "block"; 
}

.button_arrow {
  width:40px;
  height:40px;
  line-height:40px:
  transition: background-color .3s,color .15s,box-shadow .3s,opacity 0.3s;
  display: inline-block;
  text-align: center;
  color: #fff;
  background-color: #000;
  position: relative;
  overflow: hidden;
  z-index: 1;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 24px;
}

.arrow_placement_left{
position:absolute;
top:45%;
left:0;
}

.arrow_placement_right{
position:absolute;
top:45%;
right:0;
}

.image_spec{
max-width:590px;
position:relative;
margin: auto;
}

<div class="image_spec">


<img class="java_action" src="http://img.dummy-image-generator.com/abstract/dummy-600x400-FairyLights.jpg">
<img class="java_action" src="http://img.dummy-image-generator.com/abstract/dummy-600x400-Glass.jpg">
<img class="java_action" src="http://img.dummy-image-generator.com/abstract/dummy-600x400-DesiccationCracks.jpg">
<img class="java_action" src="http://img.dummy-image-generator.com/abstract/dummy-600x400-Comb.jpg">

<a class="button_arrow arrow_placement_left" onclick="plusDivs(-1)">&#10094;</a>
<a class="button_arrow arrow_placement_right" onclick="plusDivs(+1)">&#10095;</a>
</div>

之后，如果您不想有箭头，可以使用过度的 CSS 代码并删除这些行。

希望对你有帮助。

【讨论】：