Javascript 下一个div，上一个div导航_Javascript_Jquery_Html

Javascript 下一个div，上一个div导航

javascript jquery html

Javascript 下一个div，上一个div导航,javascript,jquery,html,Javascript,Jquery,Html,我正在尝试进行下一个/上一个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 na

我正在尝试进行下一个/上一个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个链接/按钮，可触发滚动至相应标签

我希望导航有位置：固定；所以在滚动时，它会停留在我需要的地方

最后，我找不到的是，它根据导航按钮叠加的内容来检测当前位置

这意味着，如果我在按钮位于下方但位于上方的情况下按next，它将向下滚动到

，首先您可以在元素中添加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();
   } 
 })

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

我将向按钮元素添加一个数据属性以指示当前位置，然后在单击按钮时读回最后一个属性。我在打电话，所以我不能测试下面的代码，但希望它能让你开始

<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名称放入变量中。然后使用jQuery的DOM导航方法，如.next和.prev，找到您想要访问的DIV。无论出于何种原因，它似乎不起作用，我对代码进行了几次检查，但没有发现问题。你能做一个JSFIDLE吗？我在打电话，没有小提琴。查找如何使用jquery设置自定义属性。