在引导分页

Question

突出一个页码我在应用程序中实现引导分页。现在我有一个要求，要突出几个页码（将得到动态页面数）的红色。任何人都可以请我指出一个正确的方向。 感谢

Answer 1

您可以定义包含应显示为红色的页面的阵列，

self.redPages = ko.observableArray([1, 3]); 

而且，添加data-bind为css当当前页码属于该适用一类page-item-redredPages阵列：

<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());

.page-item-red > a { 
 
    color: red; 
 
}

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