Question

我已在我的应用程序中实现了bootstrap分页。现在我需要以红色突出显示几个页码（动态获取页码）。任何人都可以指出我正确的方向。感谢

Answer 1

您可以定义一个数组，其中包含应以红色显示的页面

 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}">

＆＃13;

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;

在引导分页中突出显示页码

1 个答案: