我已在我的应用程序中实现了bootstrap分页。现在我需要以红色突出显示几个页码(动态获取页码)。任何人都可以指出我正确的方向。 感谢
答案 0 :(得分:0)
您可以定义一个数组,其中包含应以红色显示的页面
self.redPages = ko.observableArray([1, 3]);
并且,当当前页码属于data-bind
数组时,为css
page-item-red
添加一个应用类redPages
的{{1}}:
<li class="page-item" data-bind="css: {'page-item-red' : redPages.indexOf(1) >= 0}">
var vm = function() {
var self = this;
self.redPages = ko.observableArray([1, 3]);
};
ko.applyBindings(new vm());
&#13;
.page-item-red > a {
color: red;
}
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#">Previous</a></li>
<li class="page-item" data-bind="css: {'page-item-red' : redPages.indexOf(1) >= 0}">
<a class="page-link" href="#">1</a></li>
<li class="page-item" data-bind="css: {'page-item-red' : redPages.indexOf(2) >= 0}">
<a class="page-link" href="#">2</a></li>
<li class="page-item" data-bind="css: {'page-item-red' : redPages.indexOf(3) >= 0}">
<a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a></li>
</ul>
</nav>
&#13;