Question

I am have an issue with the page reloading. I have written a simple jQuery script that will tab through content. You can see it in action here: http://www.jonathanmaloy.com/tabstack/

The problem is that the page reloads and starts back at the top. I want to be able to have it stay in the same position so when you click on the next tab you wont have to scroll down the page back to it.

preventDefault() and return false do not fix the problem.

If there is anything else you need let me know but with the above link you can see everything.

Here is my current jQuery code:

$(document).ready(function() {
    $('#tabnav li').click(function() {
        $(this).not('.active').each(function() {
            $('.tab').hide();
            $('#tabnav li.active').removeClass('active');
        });
        $(this).addClass('active'); 
        $($(this).attr('title')).fadeIn(450);
    });
    $('#tabnav li:first').click();
});

Thanks in advance for any help!

Answer 1

Edit: Updated answer based on properly reading the question 🙂

As discussed in the comments the problem arises when a new tab is shown and a previously shown tab is hidden. The DOM removal of the previous tab shrinks the page which causes the browser to jump to the top of the page which looks like a page reload, when actually it is not.

The following JavaScript stores the visible tab first and removes it once the new tab has begun to fade in. I also made a few changes to speed up the function by storing some jQuery objects so save re-querying the DOM each time. Also note that you did not need the each() as the same result can be achieved with a different selector, plus in your original code you were effectively hiding all .tab class elements multiple times.

$(function() {
  var tabItems = $('#tabnav li'); // save looking this up multiple times
  $('.tab').hide(); // hide all initially

  $('#tabnav li').click(function() {
    // remove active class from all and store the visible tab
    tabItems.removeClass('active');
    var visibleTab = $('.tab:visible');

    // add class to selected list item
    $(this).addClass('active');

    $(this.title).fadeIn(450); // show new tab
    visibleTab.hide(); // hide old one (DOM already has new tab in so page height will not shrink)
  });

  $('#tabnav li:first').click();
});

You want to either call event.preventDefault() or add a return false; (you don’t need the event for this one) to the end of the function.

By default the browser would execute any click functions bound to the element being clicked on and then follow the link (which I assume is href="#" or similar) that causes the browser to reload the page. Since you are binding a function to the click event you are need to stop the click event from continuing and the browser will not continue execution and follow the href.

JavaScript

$('#tabnav li').click(function(event) { // <-- added the eventData map
    $(this).not('.active').each(function() {
        $('.tab').hide();
        $('#tabnav li.active').removeClass('active');
    });
    $(this).addClass('active'); 
    $($(this).attr('title')).fadeIn(450);
    event.preventDefault(); // or return false;
});