0

我在网上看到有很多类型的 jquery 分页脚本。这些也很好用，但在我的页面中，我猜没有一个会真正起作用。我已经尝试了一些但没有工作。原因之一是我有标签内容，而分页将在标签内容中。我也需要根据内容长度进行分页，所以我没有办法做到这一点。然后我决定简单地做下一个然后回来。我在 jquery 中不是那么专业。这就是为什么我做了类似下面的东西。这是工作，但我想知道有没有更好或更简单的方法来做这种类型的分页

演示 http://jsfiddle.net/cTBTU/

html

<ul>
<div id="f1">
  <li><strong>conten one</strong></li>
  <li><strong>content two</strong></li>
  <li><strong>content three</strong></li>
  <a href="#" id="f2active" class="btn">next</a>
  </div>
  <div id="f2">
  <li><strong>content four</strong></li>
  <li><strong>content five</strong></li>
  <li><strong>content six</strong></li>

  <a href="#" id="f1back" class="btn">back</a>
    <a href="#" id="f3active" class="btn">next</a>

  </div>
 <div id="f3"> <li><strong>content seven</strong></li>


  <li><strong>content eight</strong></li>
  <li><strong>content nine</strong></li>
  <a href="#" id="f2back" class="btn">back</a>
    <a href="#" id="f4active" class="btn">next</a>
  </div>
  <div id="f4">
  <li><strong>content ten</strong></li>
  <a href="#" id="f3back" class="btn">back</a>
  </div>
</ul>

jQuery代码

$(document).ready(function(){
  $("#f2, #f3, #f4").hide();

  $("#f2active").click(function(){
  $("#f1").hide();
  $("#f2").show();
  });

  $("#f3active").click(function(){
  $("#f2").hide();
  $("#f3").show();
  });

  $("#f4active").click(function(){
  $("#f3").hide();
  $("#f4").show();
  });

  $("#f1back").click(function(){
  $("#f2").hide();
  $("#f1").show();
  });

  $("#f2back").click(function(){
  $("#f3").hide();
  $("#f2").show();
  });

  $("#f3back").click(function(){
  $("#f4").hide();
  $("#f3").show();
  });

});
4

1 回答 1

0

您应该避免硬编码。您有 2 个选项：

  1. 如果内容是预加载的，隐藏所有并显示一个子集。 $('li').hide(); $('li').splice(index, index+lengthToShow).show(). 检查这个http://jsfiddle.net/uJQXc/

  2. 从服务器动态加载页面内容并将其显示在 UI 中。 $('#container').load('ajax/content?page=0&size=3')

于 2013-09-08T04:29:50.993 回答