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

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

运行效果截图如下：

具体代码如下：

！DOCTYPE html html标题索引/标题脚本类型=' text/JAVAScript ' src=' http : jquery。js '/脚本样式类型=' text/CSS '正文{ margin :0划水：0;font-size :12 pxcolor:gray}。容器{ height :200 pxbackground : # F2F2F2border-radius :6 px；-web套件-边框-半径：6 px-moz-边界-半径：6 pxborder:6px固体# D5D5D5}。包装材料{宽度：90%;余量：0px汽车；} .页面容器{ margin :0 auto高度：30 px位置：相对；宽度：100%;} .页面{宽度：30像素高度：30 px背景： # 494949;边界半径：30像素；边距-左侧：5 px-web套件-边框-半径：30 px-moz-边界-半径：30 px线高：30 pxfont-size :15 px显示：块；文本对齐：居中；color : # ffffloat : leftcursor :指针指针；float : leftmargin-top :5 px；} .页面：悬停{背景： # 42 ffd字体粗细：加粗；} .佩奇。活动{后台： # 0864 c 0；}/style脚本类型=' text/JavaScript '(function(){ $)。fn。page create=function(URL、allPage、currentPage、page target){ if(isNaN(所有页面)| |所有页面1 | | isNaN(当前页面)| |当前页面1 | $ .trim(URL)==' '){ return；} var html=[]，self=$(this)，pageTarget=pageTarget？' : ' '上一页=当前页1?currentPage - 1 : 0，nextPage=currentPage allPage？当前页面1 : 0 left=' a target=' page target ' ' class=' page ' href=' URL ' 1 '/aa target=' page target ' ' href='(上一页==0？JavaScript 3: void(0)' : URL prev page)' ' class=' page ' lt/a '，right=' a target=' page target ' ' href=' '(下一页==所有页？JavaScript : void(0)' : URL prev page)' ' class=' page '/aa target=' page target ' ' class=' page ' href=' URL all page ' '/a '；html。push(' div class=' page container ' ')；html.push(左);for(var I=CurrentPage；i=allPageI){ html。push(' a href=' URL I ' ' target=' page target ' ' class=' page '(I==CurrentPage？active ' : ' ')' ' ' I '/a ')；} html.push(右);html。push('/div ')；自我。html(html。join(“”)；};})();$(文档)。ready(function(){ $(' # page container ')).pageCreate('http://localhost/？page='，5，3，' _ blank ')；});/script/head body div class=' wrapper ' div class=' container ' id=' page container '/div/div/body/html更多关于jQuery特效相关内容感兴趣的读者可查看本站专题： 《jQuery常见经典特效汇总》 及《jQuery动画与特效用法总结》

希望本文所述对大家jQuery程序设计有所帮助。