Browser back/next button to navigate between tabs

Question

I'm getting a lot of complaints from the users that when they're using my jQuery-based tabs, they find it annoying that when they hit back on their browser, they don't go to the previous tab but to the previous page. I added the following previous/next buttons but not enough. How can I reconfigure my buttons so that users would go to the previous tab rather than the previous page when they click the browser back arrow. You can test it here.

$('#quicktabs-registration_steps').append('<div class="prevnext"><a class="tablink-prev btn" href="#">Prev</a><a class="tablink-next btn btn-lg btn-primary" href="#">Continue</a></div>');
$('.tablink-prev').click(function () {
    var index = $('.quicktabs-tabs li.active').index();
    $('.quicktabs-tabs li').eq(index).removeClass('active');
    if (index == 0) {
        index = 1;
    }
    $('.quicktabs-tabs li').eq(index - 1).addClass('active');
    $('.quicktabs-tabs li').eq(index - 1).find('a').click();
    return false;
});
$('.tablink-next').click(function () {
    var length = $('.quicktabs-tabs').first().children().size();;
    var index = $('.quicktabs-tabs li.active').index();
    $('.quicktabs-tabs li').eq(index).removeClass('active');
    //                if (parseInt(index) == parseInt(length) - 1 ) {
    //                    index = index - 1;
    //                }
    if (parseInt(index) == parseInt(length) - 1) {
        window.location.href = '/home'; //redirect to home
        //index = index - 1;
    }
    $('.quicktabs-tabs li').eq(index + 1).addClass('active');
    $('.quicktabs-tabs li').eq(index + 1).find('a').click();
    return false;
});

Answer 1

You can use History.

Push a history state when a new tab is opened

history.pushState({page: 1}, "title 1", "?page=1")

Reference: https://developer.mozilla.org/en-US/docs/Web/API/History_API