jQuery ajax tabs

Здравствуйте.

Пытаюсь сделать табы на аяксе. Все работает, но есть пару вопросов. Вот разметка

<ul>
    <li class="active"><a href="/post/{{ $post->slug }}" data-ajax-tab>Рекомендуемые</a></li>
    <li><a href="/post/{{ $post->slug }}/most-viewed" data-ajax-tab>Самые просматриваемые</a></li>
    <li><a href="/post/{{ $post->slug }}/popular" data-ajax-tab>Популярные<span>(0)</span></a></li>
</ul>

Вот сам скрипт

var ajaxLoader = $('[data-loader]');
$('[data-ajax-tab]').on('click', function(e){
    e.preventDefault();
    var link = $(this);
    var url = link.attr('href');
    $('li.active').removeClass('active');
    link.parent().addClass('active');
    var contentArea = $('[data-post-content]');
    contentArea.empty();
    ajaxLoader.show();
    setTimeout(function(){
        $.get({
            url: url,
            dataType: "html",
            success: function(template)
            {
                contentArea.append(template);
                ajaxLoader.hide()
            },
            error: function(error)
            {
            }
        })
    }, 2000);
});

Сейчас, если перейти по адресу site.name/post/bla-bla/popular, то отдается шаблон, который при нажатии на таб популярные отдается. А как сделать, что бы загрузилась страница, и автоматически таб популярные стал активен?

И второй вопрос, почему query string не изменяется? Я ведь методом гет получаю. Таб активируется, а адрес остается без изменений.