jQuery+css实现的换页标签栏效果

本文实例讲述了jQuery+css实现的换页标签栏效果。分享给大家供大家参考，具体如下：
运行效果截图如下：

具体代码如下：

<！DOCTYPE html><html> <head><title>index</title><script type="text/javascript" src="jquery.js"></script><style type="text/css" > body {margin:0; padding:0; font-size:12px; color:gray; } .container {height:200px; background:#F2F2F2; border-radius:6px;-webkit-border-radius:6px; -moz-border-radius:6px; border:6px solid #D5D5D5;} .wrapper {width:90%; margin:0px auto; } .pageContainer {margin:0 auto; height:30px; position:relative; width:100%; } .page {width:30px; height:30px; background:#494949; border-radius:30px; margin-left:5px;-webkit-border-radius:30px; -moz-border-radius:30px; line-height:30px; font-size:15px;display:block; text-align:center; color:#fff; float:left; cursor:pointer; float:left;margin-top:5px; } .page:hover {background:#42CFFD; font-weight:bolder; } .page.active {background:#0864C0;}</style><script type="text/javascript" > （function（）{$.fn.pageCreate = function（url, allPage, currentPage, pageTarget）{ if（isNaN（allPage） || allPage < 1 || isNaN（currentPage） || currentPage < 1 || $.trim（url） == ""） {return; } var html = [],self = $（this）,pageTarget = pageTarget?"":""prevPage = currentPage > 1 ? currentPage - 1 : 0,nextPage = currentPage < allPage ? currentPage + 1 : 0left = "<a target=""+pageTarget+"" class="page" href=""+url+"1"><<</a><a target=""+pageTarget+"" href=""+（prevPage==0?"javascript:void（0）":url+prevPage）+"" class="page"><</a>",right = "<a target=""+pageTarget+"" href=""+（nextPage==allPage?"javascript:void（0）":url+prevPage）+"" class="page">></a><a target=""+pageTarget+"" class="page" href=""+url+allPage+"" >>></a>"; html.push（"<div class="pageContainer">"）; html.push（left）; for（var i=currentPage; i<=allPage; i++） {html.push（"<a href=""+url+i+"" target=""+pageTarget+"" class="page "+（i==currentPage?"active":""）+"">"+i+"</a>"）; } html.push（right）; html.push（"</div>"）; self.html（html.join（""））;}; }）（）; $（document）.ready（function（）{$（"#pageContainer"）.pageCreate（"http://localhost/?page=", 5, 3, "_blank"）; }）;</script> </head> <body><div class="wrapper"> <div class="container" id="pageContainer"> </div></div> </body></html>

更多关于jQuery特效相关内容感兴趣的读者可查看本站专题：《jQuery常见经典特效汇总》及《jQuery动画与特效用法总结》
希望本文所述对大家jQuery程序设计有所帮助。