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

2022-01-13,,,,

这篇文章主要介绍了jQuery+css实现的换页标签效果,涉及jQuery动态操作页面元素构造换页标签的相关技巧,需要的朋友可以参考下

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

运行效果截图如下:

具体代码如下:

   index 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; }    

更多关于jQuery特效相关内容感兴趣的读者可查看本站专题:《jQuery常见经典特效汇总》及《jQuery动画与特效用法总结》

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

以上就是jQuery+css实现的换页标签栏效果的详细内容,更多请关注本站其它相关文章!

《jQuery+css实现的换页标签栏效果.doc》

下载本文的Word格式文档,以方便收藏与打印。