html导航栏自动显示更多的,javascript实现导航栏分页效果

本文实例为大家分享了js实现导航栏分页效果的具体代码，供大家参考，具体内容如下

1、结构搭建HTML代码

2、页面修饰的css样式代码

.page{

width:500px;margin:100px auto;color: #ccc;

}.page a{

display: inline-block;color: #428bca;height: 25px;

line-height: 25px;padding: 0 10px;border: 1px solid #ddd;

margin: 0 2px;border-radius: 4px;vertical-align: middle;

}.page a:hover{

border: 1px solid #428bca;

}.page .current{

display: inline-block;height: 25px;line-height: 25px;

padding: 0 10px;margin: 0 2px;color: #fff;

background-color: #428bca;border: 1px solid #428bca;

border-radius: 4px;vertical-align: middle;

}.page .disabled{

display: inline-block;height: 25px;line-height: 25px;

padding: 0 10px;margin: 0 2px;color: #bfbfbf;

background: #f2f2f2;border: 1px solid #bfbfbf;

border-radius: 4px;