Страницы

Поиск по вопросам

суббота, 13 июля 2019 г.

jQuery ajax tabs

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


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


Ответ

Ответ на первую часть вопроса - да просто убрать класс active у предыдущего элемента и сделать его активным у нужного. Вы уже пытаетесь это сделать:
$('li.active').removeClass('active'); link.parent().addClass('active');
Разве не работает?
На вторую часть вопроса смогу дать ответ позже, как конкретизируете его. Впрочем, если я верно вас понял, то функция $.get() и не должна менять адресную строку браузера, так как единственная ее функция - это взять посредством ajax-запроса какой-либо контент. По сути, это обертка для $.ajax(), которая сделана ради понятности кода.
Так что, отвечая на вторую часть вашего запроса, вам нужно менять адресную строку самому. Это делается через объект window, а точнее через window.history. Есть как готовые библиотеки и функции для работы с ним, так и возможность нативно сделать то, что вы хотите. Заметьте, что только при работе с этим объектом пользователь у вас сможет получать ожидаемую работу с историей браузера, когда перемещение по истории будет работать так, как оно и должна работать при динамическом изменении контента.

Комментариев нет:

Отправить комментарий