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 : 0

left = '<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程序设计有所帮助。