Как сделать сохранение активного таба после перезагрузки страницы?

Question

[Андрей]

Добрый день!
Как можно сделать сохранение активного таба после перезагрузки страницы на js и php?

Answer 1

[iBird Rose]

ну к примеру ссылки для табов сделай якорями. тогда открытый таб будет в адресной строке отображаться. оттуда уже че хочешь с ним делай.

Answer 2

[Олег Спиридонов]

Информации маловато, но например можно в куки записать активный таб и при обновлении либо при помощи php активировать таб при генерации html, либо после загрузки страницы скриптом активировать согласно данных в куках.

Comments

[Андрей]

"либо после загрузки страницы скриптом активировать согласно данных в куках "
Как это можно реализовать?

[Олег Спиридонов]

Андрей: Покажите структуру табов. Вообще, тезисно - скриптом читаете cookie (как сформировать куку - зависит от структуры табов), все табы делаете неактивными, а нужный - активным (опять-таки, смотря какая структура, как вариант - класс "active" проставляется нужному табу)

[Андрей]

html:

<div id="tab-container">
					<div style="display: block;" id="general">
					<div id="title_tab_pr">
						<span>Личный кабинет</span>
					</div>
						 <div class="tab_pr_conts">
							тут текст		
						</div>
					</div>
					<div style="display: none;" id="participants">
					<div id="title_tab_pr">
						<span>Адрес доставки</span>
					</div>
						 <div class="tab_pr_conts2">
							тут текст
						</div>
					</div>
					<div style="display: none;" id="order">
					<div id="title_tab_pr">
						<span>Заказы</span>
					</div>
						 <div class="tab_pr_conts3">
							 тут текст
						</div>
					</div>
				</div>
				<div id="tab-headers">
					<ul>
						<li class="pr_chose_this"><a href="#general"><img src="/images/icons/personal/personal_icons.png" class="sidebar-button-icon" alt="личные данные" /><span id="before_pr_title">Личные данные</span></li>
						<li class="pr_chose_this"><a href="#participants"><img src="/images/icons/personal/map_icons.png" class="sidebar-button-icon" alt="Адрес доставки" /><span id="before_pr_title">Адрес доставки</<span></li>
						<li class="pr_chose_this"><a href="#order"><img src="/images/icons/personal/pay_icons.png" class="sidebar-button-icon" alt="Заказы" /><span id="before_pr_title">Заказы</<span></li>
					</ul>
				</div>

js:

<script type="text/javascript">
    $(document).ready(function(){
        var tabContainers = $('#tab-container > div');
        tabContainers.hide().filter(':first').show();

        $('#tab-headers ul li a').click(function () {
            tabContainers.hide();
            tabContainers.filter(this.hash).show();
            $('#tab-headers ul li').removeClass('selected');
            $(this).parent().addClass('selected');
            return false;
        }).filter(':first').click();
    });
	</script>

[Олег Спиридонов]

Если на сервере не надо обрабатывать - то удобнее local storage использовать.
в $('#tab-headers ul li a').click пишите this.hash в хранилище:
localStorage["activetab"] = this.hash;
При обновлении страницы - берете значение из хранилища и активируете таб:
tabContainers.hide();
var a = localStorage["activetab"];
tabContainers.filter(a).show();
$("a[href="+a+"]").parent().addClass('selected');
Примерно так