javascript在点击时添加活动类

Question

我有一个分页：

<nav>
    <ul class="pagination">
        {% if product_list.has_previous %}
            <li class="disabled"><a href="?page={{ product_list.previous_page_number }}" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
        {% endif %}
        <li class="active"><a href="?page=1">1 <span class="sr-only">(current)</span></a></li>
        <li><a href="?page=2">2</a></li>
        <li><a href="?page=3">3</a></li>
        <li><a href="?page=4">4</a></li>
        <li><a href="?page=5">5</a></li>
        <li><a href="?page=6">6</a></li>
        <li><a href="?page=7">7</a></li>
        {% if product_list.has_next %}
            <li><a href="?page={{ product_list.next_page_number }}" aria-label="Next"><span aria-hidden="true">»</span></a></li>
        {% endif %}
    </ul>
</nav>

这里我的第一个元素是活动的，并以另一种颜色显示。 我想在我点击的位置添加活动类。 需要帮助。

我对javascript不太了解

Answer 1

试试这个

$(".pagination").on("click","li",function(){

  // reset previous selected li 
  $(".pagination .active").removeClass("active");
  $(this).addClass("active");

});