javascript add active class on clicked

Question

I have a pagination like :

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

Here my first element is active and displays in another color. I want to add the active class where I click. Help needed.

I dont know much about javascript

Answer 1

Try like this

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

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

});