3

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

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

<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 не изменяется? Я ведь методом гет получаю. Таб активируется, а адрес остается без изменений.

4
  • А про вторую часть вопроса можно подробнее написать? 16 фев 2017 в 6:44
  • @Станислав ну допустим я нахожусь на странице site.name/post/perviy-probniy-post. Затем, под постом я жму на таб популярные. Этот таб имеет адрес вида site.name/post/perviy-probniy-post/popular, таб активируется, популярные посты появляются. Но адрес старници остается site.name/post/perviy-probniy-post, почему не ``site.name/post/perviy-probniy-post/popular`? Я ведь $.get({}) использую. Он ведт должен по данному адресу перейти?
    – Alex_01
    16 фев 2017 в 6:49
  • то есть в смысле в адресной строке браузера что ли адрес не меняется? 16 фев 2017 в 6:50
  • Да. Вот пример что я хочу сделать. Если перейти по по этому адресу hotline.ua/computer-noutbuki-netbuki/… , то открывается страница, и таб с ценами становится активным и подгружает шаблон
    – Alex_01
    16 фев 2017 в 6:59

1 ответ 1

1

Ответ на первую часть вопроса - да просто убрать класс active у предыдущего элемента и сделать его активным у нужного. Вы уже пытаетесь это сделать:

$('li.active').removeClass('active');
link.parent().addClass('active');

Разве не работает?

На вторую часть вопроса смогу дать ответ позже, как конкретизируете его. Впрочем, если я верно вас понял, то функция $.get() и не должна менять адресную строку браузера, так как единственная ее функция - это взять посредством ajax-запроса какой-либо контент. По сути, это обертка для $.ajax(), которая сделана ради понятности кода.

Так что, отвечая на вторую часть вашего запроса, вам нужно менять адресную строку самому. Это делается через объект window, а точнее через window.history. Есть как готовые библиотеки и функции для работы с ним, так и возможность нативно сделать то, что вы хотите. Заметьте, что только при работе с этим объектом пользователь у вас сможет получать ожидаемую работу с историей браузера, когда перемещение по истории будет работать так, как оно и должна работать при динамическом изменении контента.

3
  • Вы не поняли. В первой части вопроса проблема в не в активном табе. Пример привел в комментарии выше
    – Alex_01
    16 фев 2017 в 7:00
  • А, понял вас. Сек 16 фев 2017 в 7:05
  • @Alex_01 обновил ответ. 16 фев 2017 в 7:09

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.