Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » jQuery » Как организовать кэширование табов при перезагрузки страницы ?

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


     23.03.2015    Все вопросы » jQuery    2503

вопрос
Здравствуйте, организовал в полной новости вкладки (табы) приведенные ниже, так вот после перезагрузки страницы вкладки не сохраняют свою активную позицию (не кэшируются), а просто отображают с первой вкладки.. думаю нужно добавить в js код которые мог бы все это реализовать.. но к сожеления я в JS не волоку ((( просьба помочь и разобраться мне с этим

спасибо.

HTML

<ul id="tabs">
    <li><a href="#" name="#tab1">Один</a></li>
    <li><a href="#" name="#tab2">Два</a></li>
    <li><a href="#" name="#tab3">Три</a></li>
    <li><a href="#" name="#tab4">Четыре</a></li>
</ul>

<div id="content">
    <div id="tab1">...</div>
    <div id="tab2">...</div>
    <div id="tab3">...</div>
    <div id="tab4">...</div>
</div>


JS


function resetTabs(){
        $("#content > div").hide(); //Скрываем содержание
        $("#tabs a").attr("id",""); //Сбрасываем id      
    }

    var myUrl = window.location.href; //Получаем URL
    var myUrlTab = myUrl.substring(myUrl.indexOf("#")); // Для localhost/tabs.html#tab2 myUrlTab = #tab2    
    var myUrlTabName = myUrlTab.substring(0,4); // Для выше привденного примера myUrlTabName = #tab

    (function(){
        $("#content > div").hide(); // Скрываем все содержание при инициализации
        $("#tabs li:first a").attr("id","current"); // Активируем первую закладку
        $("#content div:first").fadeIn(); // Показываем содержание первой закладки
        
        $("#tabs a").on("click",function(e) {
            e.preventDefault();
            if ($(this).attr("id") == "current"){ //Определение текущейй закладки
             return      
            }
            else{            
            resetTabs();
            $(this).attr("id","current"); // Активируем текущую закладку
            $($(this).attr('name')).fadeIn(); // Показываем содержание текущей закладки
            }
        });

        for (i = 1; i <= $("#tabs li").length; i++) {
          if (myUrlTab == myUrlTabName + i) {
              resetTabs();
              $("a[name='"+myUrlTab+"']").attr("id","current"); // Активируем закладку по url
              $(myUrlTab).fadeIn(); // Показываем содержание закладки
          }
        }
    })()


демо скрипта: http://ruseller.com/lessons.php?rub=32&id=1455

Ответа пока нет


Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх