2

Как сделать tab, чтобы при нажатии на один из пунктов таба страница не перезагружалась, но при этом URL менялся?

Вот пример.

Здесь, если нажимать на кнопки "Редакции" и "Сравнить", страница не перезагружается, а URL меняется. И соответственно, если скопировать этот URL и вставить в новую вкладку, то откроется эта же страница с тем табом который был нажат.

Вот код моего таба:

$(function(){
    $('#prod_tabs li').eq(0).addClass('active');
    $('#prod_blocks .pb').eq(0).addClass('active');
    $('#prod_tabs li').click(function(){
                alert(location.href);
        $('#prod_tabs li').removeClass('active');
        $('#prod_blocks .pb').removeClass('active');
        $('#prod_tabs li').eq($(this).index()).addClass('active');
        $('#prod_blocks .pb').eq($(this).index()).addClass('active');
    });
});
1
  • читайте про history api. ЗА ВАС ктото чтото будет делать только за плату.
    – thunder
    21 фев 2013 в 11:20

1 ответ 1

5

При клике на таб меняйте хэш, URL можно будет скопировать и открыть на нужном табе:

window.location.hash = 'tab1'

А при загрузке страницы проверяйте хэш и открывайте нужный таб:

if (window.location.hash != '') openTab(window.location.hash)
2
  • Спасибо конечно, а не могли бы вы мне на мой скрипт приблизительно добавить как должно выглядеть
    – Karalahti
    21 фев 2013 в 8:40
  • 3
    Нет, я достаточно написал для решения вашей задачи. 21 фев 2013 в 9:16

Ваш ответ

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

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