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

我有5个带ID的div#一、二、三、四、五。我有一个导航菜单链接到每个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，jquery有一个触发事件。当用户单击“下一步”或“上一步”按钮时，您可以触发链接上的单击事件。

我将根据以下假设作出响应：这纯粹是一个理论练习，并且仅提供您提供的信息。请注意，正如第一条评论中所提到的，有更好的方法来完成你的要求

但是，假设您在每个页面上都有一个相同的导航菜单，并且每个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>

div1
第2组
第3组
函数焦点特定RDIV（divId）
{
开关（divId）
{
案例一：
document.getElementById（'two'）.style.display='none'；
document.getElementById（'three'）.style.display='none'；
document.getElementById（'one'）.style.display='block'；
打破
案例二：
//等等。。。
打破
案例三：
//等等。。。
打破
}
}

然后，您可以在next/previous按钮的onClick事件上调用该JS函数

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

或者类似的事情

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

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

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

这真的取决于你在追求什么，你的标准是什么；因此，我试图为您介绍一些基本情况。

类似于

$(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();
    });
});

---

为什么是jquery或javascript。在服务器上创建页面不是很容易处理吗？我相信所有的页面都同时被加载在一个可能的重复的感谢中。我没有想到有一个更容易的，IVE只是因为某种原因被设置在这上面。我该怎么处理你描述的服务器方法呢？对不起，如果这是一个愚蠢的问题这里有一些类似的东西谢谢你这实际上是我现在拥有的我想我可以简化一下，但是请告诉我如何用更简单的方法来处理它这里有一些类似的东西