javascript add active class on clicked

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

Answers


Try like this

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

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

});

Need Your Help

Multiple variables for loop python

python loops variables for-loop arguments

I am trying to create a for loop to write multiple associated variables defined by the user to a database, is there a way to do something like this?

Node.JS + Express + Socket.IO - websocket connection invalid info

javascript node.js sockets

I recently found a script on GitHub which allows you to run a real-time Node.JS chat application, using Express and Socket.IO dependencies. I have uploaded it to my newly acquired DigitalOcean VPS,