Могу ли я сохранить ту же вкладку jQuery при обновлении страницы или при переходе со страницы?

У меня есть базовая система вкладок jQuery:

$(document).ready(function(){
  $('#tabs div.jdiv').hide();
  $('#tabs div.jdiv:first').fadeIn("slow");
  $('#tabs ul.jdiv li:first').addClass('active');
  $('#tabs ul.jdiv li a').click(function(){ 
    $('#tabs ul.jdiv li').removeClass('active');
    $(this).parent().addClass('active'); 
    var currentTab = $(this).attr('href'); 
    $('#tabs div.jdiv').hide();
    $(currentTab).fadeIn("slow");
  return false;
  });
});

<div id="tabs" style="position:relative; ">
                <ul class="jdiv">
                  <li><a href="#current-points">Current Points</a></li>
                  <li><a href="#my-details">My Details</a></li>
                  <li><a href="#prizes">Prizes</a></li>
                  <li><a href="#basket">Your sack</a></li>
                  <li><a href="#order-history">Order History</a></li>

                </ul>

            <div id="current-points" class="jdiv" style="position:relative;">
                <?php include('current-points.php');?>     
            </div>

так далее....

Моя проблема в том, что я планирую иметь еще один набор вкладок jQuery на одной из этих страниц, что не является проблемой, но когда они нажимают на ссылку или обновляют страницу, можно ли оставаться на той же вкладке? На родительском или дочернем наборе вкладок?

Спасибо!


jquery jquery-tabs
person JamesG    schedule 29.02.2012    source источник
comment
Я не использую плагин для конкретной вкладки, просто обычный jQuery   -  person JamesG    schedule 29.02.2012

Ответы (3)


arrow_upward
8
arrow_downward

Вы можете использовать хэш-теги для уникальной идентификации каждой вкладки, поэтому http://example.com/yourpage.html#current-points перенесет вас на вкладку current-points, а http://example.com/yourpage.html#my-details — на вкладку my-details. Вы можете установить хеш, назначив location.hash, и, конечно же, вы можете прочитать это при загрузке страницы. Это также имеет огромное преимущество, поскольку ваши пользователи могут добавлять в закладки те вкладки, которые им нужны. Вы можете использовать путь в хэше, если у вас есть вкладки внутри вкладок (таким образом, #first/foo приведет вас к вкладке first и ее подвкладке foo; #first/bar приведет вас к вкладке first и ее подвкладке bar).

Вот действительно простой пример (без вложенных вкладок, но вы поняли идею):

Текущая копия | Текущий источник

HTML:

<ul id="nav">
    <li><a href="#first">First</a></li>
    <li><a href="#second">Second</a></li>
    <li><a href="#third">Third</a></li>
</ul>
<div class="tab" id="tab-first">This is first</div>
<div class="tab" id="tab-second">This is second</div>
<div class="tab" id="tab-third">This is third</div>

JavaScript:

jQuery(function($) {

    $("<p>").html("Loaded at " + new Date()).appendTo(
        document.body
    );
    showTab(location.hash || "first");

    $("#nav a").click(function() {
        var hash = this.getAttribute("href");
        if (hash.substring(0, 1) === "#") {
            hash = hash.substring(1);
        }
        location.hash = hash;
        showTab(hash);
        return false;
    });

    function showTab(hash) {
        $("div.tab").hide();
        $("#tab-" + hash).show();
    }

});

В качестве альтернативы (или вместе) вы можете установить файл cookie, когда они меняют вкладки, и проверять наличие файла cookie при загрузке страницы, чтобы выбрать последнюю выбранную вкладку.

person T.J. Crowder    schedule 29.02.2012
comment
Хорошо, это блестяще, спасибо. Гораздо лучшая система вкладок, чем у меня изначально. - person JamesG; 29.02.2012
comment
Просто интересно... Я пытаюсь установить cookie, когда пользователь переключает вкладки... это нужно делать через javascript или только в PHP? - person JamesG; 29.02.2012
comment
@JamesG: я не видел обращений к серверу в ваших вкладках, так что вы бы сделали это с помощью JavaScript. Браузеры раскрывают файлы cookie для JavaScript очень способом, но для jQuery существуют подключаемые модули файлов cookie (как этот), который справится с любой сложностью за вас, или вы можете взять некоторый код из quirksmode (в нем также есть разумное описание того, как работает интерфейс JavaScript для них). - person T.J. Crowder; 29.02.2012
comment
Хорошо, спасибо! Даже не знал о куках с JS... такой нуб извините. Ценить это! - person JamesG; 29.02.2012
comment
@JamesG: Не беспокойся, рад, что помог. - person T.J. Crowder; 29.02.2012
comment
круто, большое спасибо. У нас была эта проблема с обновлением с незапамятных времен, и, наконец, она исправлена. :) - person Syed Siraj Uddin; 17.03.2014

arrow_upward
0
arrow_downward

Чтобы сохранить текущую вкладку открытой после обновления страницы, единственное решение, которое приходит мне в голову, - это использование файлов cookie, я думаю, что оно единственное.

С другой стороны, если вы используете ссылку на веб-странице, чтобы обновить страницу, вы можете добавить к ней привязку с открытой в это время вкладкой.

person Pankucins    schedule 29.02.2012

arrow_upward
-1
arrow_downward

Не легко. Сценарий на стороне клиента перезагружается, когда вы обновляете страницу, и все изменения будут отменены, если, конечно, вы не сохраните его где-нибудь — возможно, в качестве параметра URL?

person Nix    schedule 29.02.2012
comment
Хорошо, звучит разумно. Я просто предположил, что это будет общая проблема, для которой есть определенное решение. Я попробую параметр URL. Спасибо - person JamesG; 29.02.2012