基于Bootsrap增加跳转页高亮功能
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script> var previousObj = null; $(document).ready(function(){ var pageMax = 10; $("#pageIndex").append("<li onclick=\"jumpToPage(this, -1)\"><a>«</a><li>"); for(var i=1; i<pageMax+1; i++) { if(1==i) { previousObj = $("#pageIndex").append("<li id=‘firstActive‘ onclick=\"jumpToPage(this," + (i) + ")\"><a>" + (i) +"</a><li>"); } else { $("#pageIndex").append("<li onclick=\"jumpToPage(this," + (i) + ")\"><a>" + (i) +"</a><li>"); } } $("#pageIndex").append("<li onclick=\"jumpToPage(this, 101)\"><a>»</a><li>"); previousObj = $("#firstActive"); $(previousObj).addClass("active"); }); function requestBlogs(start, end) { console.log("AJAX request"); } function jumpToPage(obj, page) { console.log("Jump to page: " + page); $(previousObj).removeClass("active"); $(obj).addClass("active"); previousObj = obj; requestBlogs(); } </script> </head> <body> <ul id="pageIndex" class="pagination"></ul> </body> </html>
演示结果：
原文：http://www.cnblogs.com/folkzy/p/7389156.html