Jak utrzymać aktualną kartę aktywną za pomocą programu ładującego Twitter po przeładowaniu strony?

87

Obecnie używam zakładek z Twitter Bootstrap i chcę wybrać tę samą kartę po opublikowaniu przez użytkownika danych i ponownym załadowaniu strony.

Jak to się robi?

Moje obecne wezwanie do inti zakładek wygląda następująco:

<script type="text/javascript">

$(document).ready(function() {

    $('#profileTabs a:first').tab('show');
});
</script>

Moje zakładki:

<ul id="profileTabs" class="nav nav-tabs">
    <li class="active"><a href="#profile" data-toggle="tab">Profile</a></li>
    <li><a href="#about" data-toggle="tab">About Me</a></li>
    <li><a href="#match" data-toggle="tab">My Match</a></li>
</ul>
javascript jquery twitter-bootstrap Paweł
źródło
1
To wydaje się być kopią pytanie stackoverflow.com/questions/18999501/...
koppor
związane ze stackoverflow.com/questions/7862233/ ...
Tim Abell

Odpowiedzi:

138

Aby to zrobić, będziesz musiał użyć localStorage lub plików cookie. Oto szybkie i brudne rozwiązanie, które można znacznie ulepszyć, ale może dać punkt wyjścia:

$(function() { 
    // for bootstrap 3 use 'shown.bs.tab', for bootstrap 2 use 'shown' in the next line
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        // save the latest tab; use cookies if you like 'em better:
        localStorage.setItem('lastTab', $(this).attr('href'));
    });

    // go to the latest tab, if it exists:
    var lastTab = localStorage.getItem('lastTab');
    if (lastTab) {
        $('[href="' + lastTab + '"]').tab('show');
    }
});
dgabriel
źródło
fajny pączek, twoje rozwiązanie może zostać dodane w rdzeniu Joomla 30, joomlacode.org/gf/project/joomla/tracker/ ...
Benn
12
Lepsze użycie $(this).attr('href')zamiast tego $(e.target).attr('id')daje hash bez pełnego adresu URL. Musisz również umieścić .tab()na tagu z data-toggle="tab"zamiast $('#'+lastTab). Zobacz też: stackoverflow.com/questions/16808205/…
Bass Jobsen
3
Wygląda na to, że metoda nieco się zmieniła w Bootstrap 3. shownNie wydaje się już działać, musiałem ją zmienić na shown.bs.tab. Uwaga: rozumiem javascript i in. Na temat ekonomii, a także rozumiem ekonomię ... więc ktoś, kto wie, o co chodzi, może mnie poprawić.
Chaz
10
Zmodyfikowano do pracy z wieloma kontrolkami kart (i Bootstrap 3): gist.github.com/brendanmckenzie/8f8008d3d51c07b2700f
Brendan
1
Przechodzi do pierwszej karty i powraca do bieżącej karty po odświeżeniu
Raviteja
23

To działa przy użyciu plików cookie, a także usuwa „aktywną” klasę z innych kart i paneli kart ... i dodaje klasę „aktywną” do bieżącej karty i panelu kart.

Jestem pewien, że istnieje lepszy sposób, aby to zrobić, ale w tym przypadku wydaje się, że działa.

Wymaga wtyczki jQuery cookie.

$(function() { 
  $('a[data-toggle="tab"]').on('shown', function(e){
    //save the latest tab using a cookie:
    $.cookie('last_tab', $(e.target).attr('href'));
  });

  //activate latest tab, if it exists:
  var lastTab = $.cookie('last_tab');
  if (lastTab) {
      $('ul.nav-tabs').children().removeClass('active');
      $('a[href='+ lastTab +']').parents('li:first').addClass('active');
      $('div.tab-content').children().removeClass('active');
      $(lastTab).addClass('active');
  }
});
ricsrock
źródło
Nie udało mi się uruchomić rozwiązania localStorage, mimo że wydawało się to logiczne. To rozwiązanie po wyjęciu z pudełka i wtyczka $ .cookie są BARDZO przydatne.
Michael J. Calkins
zastosuj .tab () do tagu a z data-toggle = "tab" zamiast usuwać i dodawać klasy, zobacz także: stackoverflow.com/questions/16808205/…
Bass Jobsen
W moim układzie, ponieważ używałem „fade in active” dla elementów div, musiałem zmienić ostatnie dwie linie, aby dodać lub usunąć „in active”.
Obromios
18

Wszystkie inne odpowiedzi są prawidłowe. Ta odpowiedź będzie uwzględniać fakt, że można mieć wiele stron ul.nav.nav-pillslub ul.nav.nav-tabsna tej samej stronie. W takim przypadku poprzednie odpowiedzi zawiodą.

Nadal używam, localStorageale z wartością stringified JSON. Oto kod:

$(function() {
  var json, tabsState;
  $('a[data-toggle="pill"], a[data-toggle="tab"]').on('shown', function(e) {
    var href, json, parentId, tabsState;

    tabsState = localStorage.getItem("tabs-state");
    json = JSON.parse(tabsState || "{}");
    parentId = $(e.target).parents("ul.nav.nav-pills, ul.nav.nav-tabs").attr("id");
    href = $(e.target).attr('href');
    json[parentId] = href;

    return localStorage.setItem("tabs-state", JSON.stringify(json));
  });

  tabsState = localStorage.getItem("tabs-state");
  json = JSON.parse(tabsState || "{}");

  $.each(json, function(containerId, href) {
    return $("#" + containerId + " a[href=" + href + "]").tab('show');
  });

  $("ul.nav.nav-pills, ul.nav.nav-tabs").each(function() {
    var $this = $(this);
    if (!json[$this.attr("id")]) {
      return $this.find("a[data-toggle=tab]:first, a[data-toggle=pill]:first").tab("show");
    }
  });
});

Tego bitu można używać w całej aplikacji na wszystkich stronach i będzie działać zarówno w przypadku kart, jak i tabletek. Upewnij się także, że karty lub pigułki nie są domyślnie aktywne , w przeciwnym razie zobaczysz efekt migotania podczas ładowania strony.

Ważne : upewnij się, że rodzic ulma identyfikator. Dzięki Alain

Oktav
źródło
2
Ponadto w przypadku BS3 zamień zdarzenie „shown” na „shown.bs.tab”
Alain
18

Aby uzyskać najlepszą opcję, użyj tej techniki:

$(function() { 
  //for bootstrap 3 use 'shown.bs.tab' instead of 'shown' in the next line
  $('a[data-toggle="tab"]').on('click', function (e) {
    //save the latest tab; use cookies if you like 'em better:
    localStorage.setItem('lastTab', $(e.target).attr('href'));
  });

  //go to the latest tab, if it exists:
  var lastTab = localStorage.getItem('lastTab');

  if (lastTab) {
    $('a[href="'+lastTab+'"]').click();
  }
});
Vaimeo
źródło
12

Wolę przechowywać wybraną kartę w wartości skrótu okna. Umożliwia to również wysyłanie linków do współpracowników, którzy niż widzą „tę samą” stronę. Sztuczka polega na zmianie skrótu lokalizacji po wybraniu innej karty. Jeśli używasz już znaku # na swojej stronie, prawdopodobnie tag hash musi zostać podzielony. W mojej aplikacji używam znaku „:” jako separatora wartości skrótu.

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#profile">Profile</a></li>
    <li><a href="#messages">Messages</a></li>
    <li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="home">home</div>
    <div class="tab-pane" id="profile">profile</div>
    <div class="tab-pane" id="messages">messages</div>
    <div class="tab-pane" id="settings">settings</div>
</div>

<script>
    $('#myTab a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
    });

    // store the currently selected tab in the hash value
    $("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) {
        var id = $(e.target).attr("href").substr(1);
        window.location.hash = id;
    });

    // on load of the page: switch to the currently selected tab
    var hash = window.location.hash;
    $('#myTab a[href="' + hash + '"]').tab('show');
</script>
koppor
źródło
Dziękuję za tę odpowiedź. U mnie działa dobrze i nie chciałem zajmować się ciasteczkami tylko dla tego problemu, więc jest super.
nico008
@koppor, to nie działa, istnieje zdarzenie ogłaszania zwrotnego. dodałem linkbutton <asp:LinkButton CssClass="form-search" ID="LinkButtonSearch" runat="server">Search</asp:LinkButton> , po kliknięciu na przycisk aktywna jest zakładka domyślna, a nie aktualna. jak mogę to naprawić?
Djama,
6

Aby zapobiec miganiu strony na pierwszej karcie, a następnie na karcie, która została zapisana przez plik cookie (dzieje się tak, gdy określisz klasę jako „aktywną” domyślnie w pierwszej zakładce)

Usuń klasę „aktywną” z kart i okienek, takich jak: 

<ul class="nav nav-tabs">
<div id="p1" class="tab-pane">

Umieść poniższy skrypt, aby ustawić pierwszą kartę jako domyślną (wymaga wtyczki cookie jQuery)

    $(function() { 
        $('a[data-toggle="tab"]').on('shown', function(e){
            //save the latest tab using a cookie:
            $.cookie('last_tab', $(e.target).attr('href'));
        });
        //activate latest tab, if it exists:
        var lastTab = $.cookie('last_tab');
        if (lastTab) {
            $('a[href=' + lastTab + ']').tab('show');
        }
        else
        {
            // Set the first tab if cookie do not exist
            $('a[data-toggle="tab"]:first').tab('show');
        }
    });
Jeferson Tenorio
źródło
3

Chcesz efekt blaknięcia? Zaktualizowana wersja kodu @ Oktav:

  1. Dla Bootstrap 3
  2. Ustawia klasy w elemencie div li i tab, aby umożliwić poprawne działanie fading. Zwróć uwagę, że wszystkie elementy div zawartości wymagająclass="tab-pane fade"

Kod: 

// See http://stackoverflow.com/a/16984739/64904
// Updated by Larry to setup for fading
$(function() {
  var json, tabsState;
  $('a[data-toggle="pill"], a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    var href, json, parentId, tabsState;
    tabsState = localStorage.getItem("tabs-state");
    json = JSON.parse(tabsState || "{}");
    parentId = $(e.target).parents("ul.nav.nav-pills, ul.nav.nav-tabs").attr("id");
    href = $(e.target).attr('href');
    json[parentId] = href;
    return localStorage.setItem("tabs-state", JSON.stringify(json));
  });
  tabsState = localStorage.getItem("tabs-state");
  json = JSON.parse(tabsState || "{}");
  $.each(json, function(containerId, href) {
    var a_el = $("#" + containerId + " a[href=" + href + "]");
    $(a_el).parent().addClass("active");
    $(href).addClass("active in");
    return $(a_el).tab('show');
  });
  $("ul.nav.nav-pills, ul.nav.nav-tabs").each(function() {
    var $this = $(this);
    if (!json[$this.attr("id")]) {
      var a_el = $this.find("a[data-toggle=tab]:first, a[data-toggle=pill]:first"),
          href = $(a_el).attr('href');
      $(a_el).parent().addClass("active");
      $(href).addClass("active in");
      return $(a_el).tab("show");
    }
  });
});
Larry K.
źródło
3

Miałem karty na wielu stronach, a localStorage zachowuje również lastTab z poprzednich stron, więc na następnej stronie, ponieważ miała ostatnią kartę poprzedniej strony w pamięci, nie znalazłem tutaj żadnej pasującej karty, więc nic nie było wyświetlane. Zmodyfikowałem to w ten sposób.

$(document).ready(function(){
    //console.log($('a[data-toggle="tab"]:first').tab('show'))
    $('a[data-toggle="tab"]').on('shown.bs.tab', function () {
        //save the latest tab; use cookies if you like 'em better:
        localStorage.setItem('lastTab', $(this).attr('href'));
    });

    //go to the latest tab, if it exists:
    var lastTab = localStorage.getItem('lastTab');
    if ($('a[href=' + lastTab + ']').length > 0) {
        $('a[href=' + lastTab + ']').tab('show');
    }
    else
    {
        // Set the first tab if cookie do not exist
        $('a[data-toggle="tab"]:first').tab('show');
    }
})

edycja: Zauważyłem, że będę musiał mieć różne lastTabnazwy zmiennych dla różnych stron, w przeciwnym razie zawsze będą się nadpisywać. na przykład lastTab_klanten, lastTab_bestellingenitd. dla dwóch różnych stron klanteni bestellingenobie o danych wyświetlanych w zakładkach.

$(document).ready(function(){
    //console.log($('a[data-toggle="tab"]:first').tab('show'))
    $('a[data-toggle="tab"]').on('shown.bs.tab', function () {
        //save the latest tab; use cookies if you like 'em better:
        localStorage.setItem('lastTab_klanten', $(this).attr('href'));
    });

    //go to the latest tab, if it exists:
    var lastTab_klanten = localStorage.getItem('lastTab_klanten');
    if (lastTab_klanten) {
        $('a[href=' + lastTab_klanten + ']').tab('show');
    }
    else
    {
        // Set the first tab if cookie do not exist
        $('a[data-toggle="tab"]:first').tab('show');
    }
})
GoharSahi
źródło
3

Zrobiłem to działa z podobnym rozwiązaniem jak @dgabriel, w tym przypadku linki <a>nie potrzebują id, identyfikują bieżącą kartę na podstawie pozycji.

$(function() { 
  $('a[data-toggle="tab"]').on('shown', function (e) {
    var indexTab = $('a[data-toggle="tab"]').index($(this)); // this: current tab anchor
    localStorage.setItem('lastVisitedTabIndex', indexTab);
  });

  //go to the latest tab, if it exists:
  var lastIndexTab  = localStorage.getItem('lastVisitedTabIndex');
  if (lastIndexTab) {
      $('a[data-toggle="tab"]:eq(' + lastIndexTab + ')').tab('show');
  }
});
Jaider
źródło
Myślę, że twój kod jest błędnie obchodzony przed wyświetleniem getItem, rozwiązuje również problem dwukrotnego zadeklarowania indexTab.
John Magnolia,
@JohnMagnolia Nazwałem indexTabdwa razy, ale jest to różnica. indeks. Więc zadzwonię do drugiego lastIndexTab. Jeśli chodzi o to shown, jest to zdarzenie, więc nie zostanie wywołane, dopóki nie otworzysz karty, więc nie ma znaczenia, czy było wcześniej getItem.
Jaider
1

Proponuję następujące zmiany

  1. Użyj wtyczki, takiej jak amplify.store, która zapewnia interfejs API dla crossbrowser / crossplatform localstorage z wbudowanymi funkcjami awaryjnymi.

  2. Skieruj na kartę, która ma zostać zapisana $('#div a[data-toggle="tab"]'), aby rozszerzyć tę funkcjonalność na wiele kontenerów kart, które istnieją na tej samej stronie.

  3. Użyj unikalnego identyfikatora, (url ??)aby zapisać i przywrócić ostatnio używane karty na wielu stronach.

$(function() { 
  $('#div a[data-toggle="tab"]').on('shown', function (e) {
    amplify.store(window.location.hostname+'last_used_tab', $(this).attr('href'));
  });

  var lastTab = amplify.store(window.location.hostname+'last_used_tab');
  if (lastTab) {
    $("#div a[href="+ lastTab +"]").tab('show');
  }
});
Sandeep
źródło
1

Proste rozwiązanie bez lokalnej pamięci:

$(".nav-tabs a").on("click", function() {
    location.hash = $(this).attr("href");
});
Francesco Borzi
źródło
0

Podejście po stronie serwera. Upewnij się, że wszystkie elementy html mają class = "" w przypadku, gdy nie został określony, w przeciwnym razie będziesz musiał obsługiwać wartości null.

    private void ActiveTab(HtmlGenericControl activeContent, HtmlGenericControl activeTabStrip)
    {
        if (activeContent != null && activeTabStrip != null)
        {
            // Remove active from content
            Content1.Attributes["class"] = Content1.Attributes["class"].Replace("active", "");
            Content2.Attributes["class"] = Content2.Attributes["class"].Replace("active", "");
            Content3.Attributes["class"] = Content3.Attributes["class"].Replace("active", "");

            // Remove active from tab strip
            tabStrip1.Attributes["class"] = tabStrip1.Attributes["class"].Replace("active", "");
            tabStrip2.Attributes["class"] = tabStrip2.Attributes["class"].Replace("active", "");
            tabStrip3.Attributes["class"] = tabStrip3.Attributes["class"].Replace("active", "");

            // Set only active
            activeContent.Attributes["class"] = activeContent.Attributes["class"] + " active";
            activeTabStrip.Attributes["class"] = activeTabStrip.Attributes["class"] + " active";
        }
    }
Michael Goldshmidt
źródło
0

Jeśli chcesz, aby pierwsza zakładka była wyświetlana przy pierwszym wejściu na stronę, użyj tego kodu:

    <script type="text/javascript">
        function invokeMeMaster() {
        var chkPostBack = '<%= Page.IsPostBack ? "true" : "false" %>';
            if (chkPostBack == 'false') {
                $(function () {
                    // for bootstrap 3 use 'shown.bs.tab', for bootstrap 2 use 'shown' in the next line
                    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                        // save the latest tab; use cookies if you like 'em better:
                        localStorage.setItem('lastTab', $(this).attr('href'));
                    });

                });
            }
            else {
                $(function () {

                    // for bootstrap 3 use 'shown.bs.tab', for bootstrap 2 use 'shown' in the next line
                    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                        // save the latest tab; use cookies if you like 'em better:
                        localStorage.setItem('lastTab', $(this).attr('href'));
                    });

                    // go to the latest tab, if it exists:
                    var lastTab = localStorage.getItem('lastTab');
                    if (lastTab) {
                        $('[href="' + lastTab + '"]').tab('show');
                    }

                });

            }
        }
        window.onload = function() { invokeMeMaster(); };

    </script>
Rozwiń fragment

ruben
źródło
0

Oto utworzony przeze mnie fragment kodu, który działa z Bootstrap 3 i jQuery oraz z różnymi adresami URL zawierającymi różne karty . Nie obsługuje jednak wielu zakładek na stronie, ale powinna być łatwą modyfikacją, jeśli potrzebujesz tej funkcji.

/**
 * Handles 'Bootstrap' package.
 *
 * @namespace bootstrap_
 */

/**
 * @var {String}
 */
var bootstrap_uri_to_tab_key = 'bootstrap_uri_to_tab';

/**
 * @return {String}
 */
function bootstrap_get_uri()
{
    return window.location.href;
}

/**
 * @return {Object}
 */
function bootstrap_load_tab_data()
{
    var uriToTab = localStorage.getItem(bootstrap_uri_to_tab_key);
    if (uriToTab) {
    try {
        uriToTab = JSON.parse(uriToTab);
        if (typeof uriToTab != 'object') {
        uriToTab = {};
        }
    } catch (err) {
        uriToTab = {};
    }
    } else {
    uriToTab = {};
    }
    return uriToTab;
}

/**
 * @param {Object} data
 */
function bootstrap_save_tab_data(data)
{
    localStorage.setItem(bootstrap_uri_to_tab_key, JSON.stringify(data));
}

/**
 * @param {String} href
 */
function bootstrap_save_tab(href)
{
    var uri = bootstrap_get_uri();
    var uriToTab = bootstrap_load_tab_data();
    uriToTab[uri] = href;
    bootstrap_save_tab_data(uriToTab);
}

/**
 *
 */
function bootstrap_restore_tab()
{
    var uri = bootstrap_get_uri();
    var uriToTab = bootstrap_load_tab_data();
    if (uriToTab.hasOwnProperty(uri) &&
    $('[href="' + uriToTab[uri] + '"]').length) {
    } else {
    uriToTab[uri] = $('a[data-toggle="tab"]:first').attr('href');
    }
    if (uriToTab[uri]) {
        $('[href="' + uriToTab[uri] + '"]').tab('show');
    }
}

$(document).ready(function() {

    if ($('.nav-tabs').length) {

    // for bootstrap 3 use 'shown.bs.tab', for bootstrap 2 use 'shown' in the next line
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        bootstrap_save_tab($(this).attr('href'));
    });
    bootstrap_restore_tab();

    }

});
cjohansson
źródło
0

$ (document) .ready (function () {

        if (JSON.parse(localStorage.getItem('currentClass')) == "active")
        {
            jQuery('#supporttbl').addClass('active')
            $('.sub-menu').css({ "display": "block" });
        }

        $("#supporttbl").click(function () { 
            var currentClass;
            if ($(this).attr('class')== "active") { 

                currentClass = $(this).attr('class');

                localStorage.setItem('currentClass', JSON.stringify(currentClass));
                console.log(JSON.parse(localStorage.getItem('currentClass')));

                jQuery('#supporttbl').addClass('active')
                $('.sub-menu').css({ "display": "block" });

            } else {

                currentClass = "Null"; 

                localStorage.setItem('currentClass', JSON.stringify(currentClass));
                console.log(JSON.parse(localStorage.getItem('currentClass')));

                jQuery('#supporttbl').removeClass('active')
                $('.sub-menu').css({ "display": "none" });

            }  
        });

});

dinesh patidar
źródło
0

jeśli masz więcej niż jedną kartę na stronie, możesz użyć następującego kodu

<script type="text/javascript">
$(document).ready(function(){
    $('#profileTabs').on('show.bs.tab', function(e) {
        localStorage.setItem('profileactiveTab', $(e.target).attr('href'));
    });
    var profileactiveTab = localStorage.getItem('profileactiveTab');
    if(profileactiveTab){
        $('#profileTabs a[href="' + profileactiveTab + '"]').tab('show');        
    }
    $('#charts-tab').on('show.bs.tab', function(e) {
        localStorage.setItem('chartsactiveTab', $(e.target).attr('href'));
    });
    var chartsactiveTab = localStorage.getItem('chartsactiveTab');
    if(chartsactiveTab){
        $('#charts-tab a[href="' + chartsactiveTab + '"]').tab('show');        
    }     
});
</script>
Mohamed Sami
źródło
0

Spowoduje to odświeżenie zakładek, ale dopiero po załadowaniu wszystkiego w kontrolerze.

// >= angular 1.6 angular.element(function () {
angular.element(document).ready(function () {
    //Here your view content is fully loaded !!
    $('li[href="' + location.hash + '"] a').tab('show');
});
PHPGuru
źródło
0

Używam tego z MVC:

  • W modelu znajduje się pole typu całkowitego SelectedTab, które służy do wysyłania wartości do metody POST

Sekcja JavaScript:

<script type="text/javascript">
    $(document).ready(function () {
       var index = $("input#SelectedTab").val();
       $("#tabstrip > ul li:eq(" + index + ")").addClass("k-state-active");

       $("#tabstrip").kendoTabStrip();
    });
    function setTab(index) {
      $("input#SelectedTab").val(index)
    }
</script>

Sekcja HTML:

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
@Html.HiddenFor(model => model.SelectedTab)
<div id="tabstrip">
    <ul>
        <li onclick="setTab(0)">Content 0</li>
        <li onclick="setTab(1)">Content 1</li>
        <li onclick="setTab(2)">Content 2</li>
        <li onclick="setTab(3)">Content 3</li>
        <li onclick="setTab(4)">Content 4</li>
    </ul>
    <div>

    </div>
    <div>

    </div>
    <div>

    </div>
    <div>

    </div>
    <div>

    </div>
</div>
<div class="content">
    <button type="submit" name="save" class="btn bg-blue">Save</button>
</div>
}
Carlos Toledo
źródło