Question

I would like to know if there is a way to disable the current class from reloading the page with jQuery?

For example, when you are on the About page the current state for the About page doesn’t allow the users to reload the page if they click on the link again. So, if you have some kind of animation it won’t start over.

If someone can lend me a hand I will greatly appreciate it.

Thank you,

This is what I have so far:

$(function() {
    $page = jQuery.url.attr("file");
    if (!$page) {
        $page = 'index.html';
    }
    $('ul.navigation li a').each(function() {
        var $href = $(this).attr('href');
        if (($href == $page) || ($href == '')) {
            $(this).addClass('current');
        } else {
            $(this).removeClass('current');
        }
    });
});

Answer 1

You have to catch the click event and cancel it. See the part I added between my comments below:

$(function(){
 $page = jQuery.url.attr("file");
 if(!$page) {
  $page = 'index.html';
 }
 $('ul.navigation li a').each(function(){
  var $href = $(this).attr('href');
  if ( ($href == $page) || ($href == '') ) {
   $(this).addClass('current');

   /** ADDED BELOW **/
   $(this).click(function(event) {
     event.preventDefault();
     event.stopPropagation();
   });
   /** ADDED ABOVE **/

  } else {
   $(this).removeClass('current');
  }
 });
});