bootstrap4.css
.page-item.active .page-link {
z-index: 1;
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
■ページネーション:pagination:コンポーネント:リンクの無効状態やアクティブ状態を指定する
<nav aria-label="ページネーションの例">
<ul class="pagination">
<li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">前</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2 <span class="sr-only">(現ページ)</span></a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">次</a></li>
</ul>
</nav>
■ページネーション:pagination:コンポーネント:span要素でリンクの無効状態やアクティブ状態を指定する
<nav aria-label="ページネーションの例">
<ul class="pagination">
<li class="page-item disabled"><span class="page-link">前</span></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><span class="page-link">2<span class="sr-only">(現ページ)</span></span></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">次</a></li>
</ul>
</nav>
<script>
$(function() {
$('.disabled > a.page-link').click(function() {
return false;
});
});
</script>