Question

我在网上看到有很多类型的jquery分页脚本。那些工作也很好，但在我的页面中，没有人会真的有效。我已经尝试了很少但没有工作。有一个原因是我在标签内容中有标签内容和分页。我也需要根据内容长度进行分页，所以我无法做到这一点。然后我决定简单地做下一步和后退。我在jquery中并不那么专业。这就是为什么我做了像波纹管一样的东西。这是工作，但我想知道有没有更好或更简单的方法来做这种类型的分页

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

});

Answer 1

你应该避免硬编码。您有两个选择：

如果内容已预加载，请隐藏所有内容并显示子集。 $('li').hide(); $('li').splice(index, index+lengthToShow).show()。请查看此http://jsfiddle.net/uJQXc/
从服务器动态加载页面内容并在UI中显示。 $('#container').load('ajax/content?page=0&size=3')

自定义jquery分页问题

1 个答案: