пользовательский jquery pagination issue

Question

Я видел в Интернете много типов сценариев разбиения на страницы jquery. они тоже работают и хорошо, но на моей странице никто не будет работать, я думаю. Я пробовал уже немного, но не работал. есть одна причина: у меня есть содержимое вкладок и разбиение на страницы будет внутри содержимого вкладки. также мне нужно сделать базу разбиения на длину контента, поэтому у меня нет способа сделать это. то я решаю просто сделать следующий и задний. Я не профессионал в jquery. вот почему я сделал что-то вроде рев. это работа, но я хочу знать, есть ли лучше или простой способ сделать это типа пагинацию

DEMOhttp://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

Вы должны избегайте жесткого кодирования. У вас есть 2 варианта:

1. Если содержание поджат, скрыть все и показать подмножество. $('li').hide(); $('li').splice(index, index+lengthToShow).show(). http://jsfiddle.net/uJQXc/

2. динамически загружает содержимое страницы с сервера и показывает ее в пользовательском интерфейсе. $('#container').load('ajax/content?page=0&size=3')