How to write multi-row and multi-column no refresh paging code for div li
This article mainly introduces "how to write div li multi-row multi-column non-refresh paging code". In daily operation, I believe many people have doubts about how to write div li multi-row multi-column non-refresh paging code. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer "how to write div li multi-row multi-column non-refresh paging code". Next, please follow the editor to study!
PHP Code
The copy code is as follows:
JavaScript Code
$(document) .ready (function () {
("div.holder") .jPages ({
ContainerID: "content"
PerPage: 6
});
});
[/ code]
CSS Code
The copy code is as follows:
Body {
Text-align: left
Direction: ltr
Font-family:tahoma,verdana,arial,sans-serif
Font-size: 11px
}
.container {
Width: 370px
Height: 100%
Margin: 0 auto
}
/ *
@ @ Demo
, /
Ul {
Margin: 0
Padding: 20px 0px
}
Ul li {
List-style-type: none
Display: inline-block
Line-height: 100px
Text-align: center
Font-weight: bold
Width: 100px
Height: 100px
Margin: 10px
Background: # ccc
}
Ul li span {
Color: # fff
Padding: 3px
}
/ *
@ @ Pagination
, /
.holder {margin: 5px 0;}
.holder a {
Font-size: 12px
Cursor: pointer
Margin: 0 5px
Color: # 333
}
.holder a:hover {
Background-color: # 222
Color: # fff
}
.holder a.jp-previous {margin-right: 15px;}
.holder a.jp-next {margin-left: 15px;}
.holder a.jp-current, a.jp-current:hover {
Color: # ed4e2a
Font-weight: bold
}
.holder a.jp-disabled, a.jp-disabled:hover {color: # bbb;}
.holder a.jp-current, a.jp-current:hover
.holder a.jp-disabled, a.jp-disabled:hover {
Cursor: default
Background: none
}
.holder span {margin: 0 5px;}
At this point, the study on "how to write multi-row and multi-column non-refresh paging code for div li" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!
