ブートストラップページネーションでページ番号を強調表示

Question

私は自分のアプリケーションでブートストラップページネーションを実装しました。今、私は、赤色でページ番号（動的にページ番号を取得する）を強調表示する必要があります。誰でも正しい方向に向けることができますか？ おかげ

Answer 1

あなたは、赤で表示されるべきページを含む配列を定義することができ

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

そして、現在のページ番号は、そのredPages配列を属しているときに、クラスpage-item-redを適用cssためdata-bindを追加します：

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