[Bootstrap - How to change bg color of a selected li of pagination] #Bootstrap #CSS #pagination #li #selectedli #.active

pagination.css

.example .pagination>li>a,
.example .pagination>li>span {
  border: 1px solid purple;
}
.pagination>li.active>a {
  background: purple;
  color: #fff;
}

pagination.html

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="example">
    <nav>
      <ul class="pagination">
        <li class="disabled">
          <a href="#" aria-label="Previous">
            <span aria-hidden="true">«</span>
          </a>
        </li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li>
          <a href="#" aria-label="Next">
            <span aria-hidden="true">»</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</div>

pagination.js

$('ul.nav > li').click(function (e) {
    e.preventDefault();
    $('ul.nav > li').removeClass('active');
    $(this).addClass('active');
});

// 或者
$("nav li a").click(function () {
    $(this).parent().addClass("active");
    $(this).parent().siblings().removeClass("active");
});