Могу ли я остаться на той же вкладке jQuery при обновлении страницы или когда я ушел со страницы? - PullRequest
Новая
       43

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

1 голос
/ 29 февраля 2012

У меня есть базовая система вкладок 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 в одну из этихстраниц, что не является проблемой, но когда они нажимают на ссылку или обновляют страницу, возможно ли остаться на той же вкладке?На родительском или дочернем наборе вкладок?

Спасибо!

Ответы [ 3 ]

8 голосов
/ 29 февраля 2012

Вы можете использовать хеш-теги для уникальной идентификации каждой вкладки, поэтому 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-файла при загрузке страницы, чтобы выбрать последнюю выбранную вкладку.

0 голосов
/ 29 февраля 2012

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

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

0 голосов
/ 29 февраля 2012

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

...