Question

我有5个带有ID的div; ＃one，＃two，＃three，＃four和#five。我有一个链接到每个div的导航菜单，如下所示;

  <ul>
     <li><a href="#one">ONE</a></li>
     <li><a href="#two">TWO</a></li>
     <li><a href="#three">THREE</a></li>
     <li><a href="#four">FOUR</a></li>
     <li><a href="#five">FIVE</a></li>
  </ul>

其中每个div代表我网站上的一个页面，ul完美地工作但是有一种方法可以有一个单独的按钮，如“下一个”按钮，点击时将转到第2页，再次点击将转到第3页等等...最好使用某种jquery甚至是javascript

Answer 1

我会基于这样的假设做出回应，即这是一个纯粹的理论练习，只给出你提供的信息。请注意，正如第一条评论中所提到的，有更好的方法可以满足您的要求。

但是，正如你所说，假设你在每个页面上都有相同的导航菜单，正如你所说，每个div都在一个单独的网页上，我建议你可以继续使用现有的方法和地点每页上的“上一页”和“下一页”按钮，并将其手动连接到正确的页面。

例如，在带有#one的页面上，您可能会看到如下按钮：

<a href="#">Previous</a><!-- does nothing.. because you're on the first page -->
<a href="#two">Next</a><!-- goes to page 2 -->

在后续页面中，您会将链接硬编码到其他页面，在最后一页上，您将以与上一个按钮被消隐的方式类似的方式删除“下一步”按钮。

说完了。您可以将所有Div放在同一个网页中，并使用JavaScript和CSS显示/隐藏它们。例如：

<div id="one" style="display:block;">Div 1</div>
<div id="two" style="display:none;">Div 2</div>
<div id="three" style="display:none;">Div 3</div>
<script type="text/javascript">
function focusOnAParticularDiv(divId)
{
    switch(divId)
    {
        case 'one':
            document.getElementById('two').style.display = 'none';
            document.getElementById('three').style.display = 'none';
            document.getElementById('one').style.display = 'block';
            break;
        case 'two':
            // etc...
            break;
        case 'three':
            // etc...
            break;
    }
}
</script>

然后，您可以在下一个/上一个按钮的onClick事件上调用该JS函数。

<input type="button" text="Next" onclick="focusOnAParticularDiv('two');" />

或类似的......

如果愿意，您可以选择使用JQuery的快捷方式。

或者，您可以使用ASP.NET向导控件：）

正如其他一些评论所述，您还可以创建用户在服务器端使用的div，这样可以避免在第一次请求时将所有div发送到客户端（这会加快用户的第一次请求）。这意味着您不需要任何JavaScript，但也意味着每次用户单击按钮时，页面都将被销毁并在服务器上重新创建并发送回客户端（完整的往返），这将具有对服务器点击次数的影响。

这取决于你所追求的是什么以及你的标准是什么;因此，为什么我试图为你覆盖几个基地。

Answer 2

JQuery有一个触发事件。当用户点击下一个或上一个按钮时，您可以在链接上触发点击事件。

Answer 3

像

这样的东西

$(document).ready(function() {
  var links = [];
  var cnt=0;
  $("ul li a").each(function(i) {
    links[i] = this.href;
  });
    $("#next").click(function(e) {
      cnt++;
      if (cnt>=links.length) cnt=0;
      location.hash=links[cnt].split("#")[1];
      e.preventDefault();
    });
});

如何使用单个按钮浏览5个不同的div

3 个答案: