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