Question

我正在尝试进行下一个/上一个div导航。我在谷歌上搜索了很多，但找不到我需要的东西。

首先，我想保持我的html结构完整

<html>
<body>
<a name="1"></a>
<div class="section">Blah blah</div>
<a name="2"></a>
<div class="section">Blah blah</div>
<a name="3"></a>
<div class="section">Blah blah</div>
</body>
</html>

这意味着没有添加包装器或任何类型的东西。

我想从导航系统获得以下内容：

2个链接/按钮触发滚动到相应的<a>标记。

我希望导航设置为position: fixed;，以便在滚动时将其保留在我需要的位置。

最后，我找不到的是它根据导航按钮重叠的位置检测当前位置。

这意味着当按钮位于<a name="2"></a>但低于<a name="3"></a>但是<a name="3"></a>以上时按下一步，它会向下滚动到{{1}}

Answer 1

首先你需要在你的元素中添加id，你可以使用该类并在prev和next上导航。

 <html>
 <body>
 <a name="1"></a>
 <div class="section">Blah blah</div>
 <a name="2"></a>
 <div class="section">Blah blah</div>
 <a name="3"></a>
 <div class="section">Blah blah</div>
 </body>
 </html>

 $(a).click(function(){
 if($(this).attr('name') == "3"){
    $(this).prev().click();
   } 
 })

注意：这是一个如何导航next和prev值的示例。

Answer 2

我会向button元素添加一个data属性来指示当前位置，然后在单击该按钮时读回最后一个属性。我在手机上，所以我无法测试后面的代码，但希望它会让你开始。

<a id="next" data-current="1">》</a>
<a id="prev">《</a>

function getCurrent () {
  return parseInt($("#next").attr ("data-current").val ());
}

function setCurrent(idx) {
  $("#next").attr("current", idx);
}

$("#next").on ("click", function () {
  val idx = getCurrent() + 1;
  if (idx > 3) idx = 1;
  navigateTo(idx);
  setCurrent (idx);
});

 // do the same for previous,  if (idx < 1) idx = 3;

下一个div，前面的div导航

2 个答案: