custom jquery pagination issue

custom jquery pagination issue

i saw in web have many type jquery pagination script. those are work and
nice too but in my page none will really work i guess. i tried already few
but not work. there one reason is i have tabs content and pagination will
inside tab content. also my i need make pagination base on content length,
so i have no how to do that. then i decide simply make next and back. i am
not so pro in jquery. that's why i made something like bellow . it's work
but i want to know is there any better or easy way to do this type
pagination
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 code
$(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();
});
});