Turn, Jquery implements simple page turning
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> paging </title>
<Script type = "text/javascript" src = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
Var total = Math. ceil ($ ("ul li"). length/3 );
Var current = 1;
$ ("Ul li: gt (2)"). hide ();
$ ("# BtnPrev"). attr ("disabled", "disabled"). click (function (){
$ ("# BtnNext"). removeAttr ("disabled ");
Current-= 1;
$ ("Ul li"). show ();
Var indexStart = (current-1) * 3;
Var indexEnd = indexStart + 2;
$ ("Li: lt (" + indexStart + "), li: gt (" + indexEnd + ")", $ ("ul"). hide ();
If (current = 1) $ (this). attr ("disabled", "disabled ");
});
$ ("# BtnNext"). click (function (){
$ ("# BtnPrev"). removeAttr ("disabled ");
Current + = 1;
$ ("Ul li"). show ();
Var indexStart = (current-1) * 3;
Var indexEnd = current * 3-1> $ ("ul li"). length-1? $ ("Ul li"). length-1: current * 3-1;
$ ("Li: lt (" + indexStart + "), li: gt (" + indexEnd + ")", $ ("ul"). hide ();
If (current = total) $ (this). attr ("disabled", "disabled ");
});
});
</Script>
</Head>
<Body>
<Ul>
<Li> 01 </li>
<Li> 02 </li>
<Li> 03 </li>
<Li> 04 </li>
<Li> 05 </li>
<Li> 06 </li>
<Li> 07 </li>
</Ul>
<Input type = "button" id = "btnNext" value = "Previous Page"/> <input type = "button" id = "btnPrev" value = "next page"/>
</Body>
</Html>