Bootstrap 3: Zachowaj wybraną kartę przy odświeżaniu strony

120

Staram się, aby wybrana karta była aktywna podczas odświeżania za pomocą Bootstrap 3 . Próbowałem i sprawdziłem z jakimś pytaniem już tu zadanym, ale nic nie działa dla mnie. Nie wiem, gdzie się mylę. Oto mój kod

HTML

<!-- tabs link -->
<ul class="nav nav-tabs" id="rowTab">
    <li class="active"><a href="#personal-info" data-toggle="tab">Personal Information</a></li>
    <li><a href="#Employment-info" data-toggle="tab">Employment Information</a></li>
    <li><a href="#career-path" data-toggle="tab">Career Path</a></li>
    <li><a href="#warnings" data-toggle="tab">Warning</a></li>
</ul>
<!-- end: tabs link -->

<div class="tab-content">
    <div class="tab-pane active" id="personal-info">
        tab data here...
    </div>

    <div class="tab-pane" id="Employment-info">
        tab data here...
    </div>

    <div class="tab-pane" id="career-path">
        tab data here...
    </div>

    <div class="tab-pane" id="warnings">
        tab data here...
    </div>
</div>

JavaScript :

// tab
$('#rowTab a:first').tab('show');

//for bootstrap 3 use 'shown.bs.tab' instead of '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('selectedTab', $(e.target).attr('id'));
});

//go to the latest tab, if it exists:
var selectedTab = localStorage.getItem('selectedTab');
if (selectedTab) {
  $('#'+selectedTab).tab('show');
}
Code Lover
źródło
Powodem, dla którego nie działa, jest to, że nie przechowuje wybranej karty. Kiedy to zrobiłem console.log("selectedTab::"+selectedTab);, mam: selectedTab::undefined. Więc zastosowana logika jest nieprawidłowa
The Dark Knight,
Czy możesz mi pomóc, co mam robić?
Code Lover,
Próbuję to naprawić. Jeśli to zrobię, opublikuję odpowiedź tutaj
The Dark Knight,
Doceniam to ... dziękuję za pomoc ...
Code Lover,
Myślę, że to zadziała: jsbin.com/UNuYoHE/2/edit . Jeśli da mi znać, prześlę odpowiedź w szybki sposób. Możesz również spojrzeć na teksty zakładek div. nie dają właściwej odpowiedzi po kliknięciu. Na przykład, jeśli klikniesz tab4, otrzymasz tekst tab1.
The Dark Knight,

Odpowiedzi:

187

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 już używasz # 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>

JavaScript, musi być osadzony po powyższym w <script>...</script>części.

$('#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');
koppor
źródło
W sekcji skryptów należy dodać średnik na końcu e.preventDefault();i$(this).tab('show');
Sean Adams-Hiett
12
Niestety przeglądarka przeskakuje do zawartości karty po kliknięciu na nią. Jest to domyślne zachowanie po ustawieniu wartości window.location.hash. Alternatywą może być użycie push.state, ale potrzebujesz polyfill dla IE <= 9. Aby uzyskać więcej informacji i inne alternatywne rozwiązania, zajrzyj na stackoverflow.com/questions/3870057/…
Philipp Michael
3
Czy jest jakiś sposób, aby zapobiec „fałszywemu przewijaniu” do danego identyfikatora po kliknięciu elementu?
Patrice Poliquin
1
Przewijanie jest spowodowane identyfikatorem przypisanym do stron kart. Jeśli używasz semantycznych identyfikatorów i zmieniasz hash (tj. Dodajesz przedrostek / sufiks), nie zostanie on rozpoznany jako prawidłowy identyfikator i nie nastąpi przewijanie. Rozszerzy odpowiedź o to.
Alex Mazzariol
1
@koppor to działa, ale kiedy przeskakuję bezpośrednio na inną zapisaną kartę (przez link), szybko wyświetla kartę główną lub pierwszą kartę około 1 sekundy przed przejściem do karty w linku .. Każdy pomysł, aby zapobiec wyświetlaniu pierwszej karta, ponieważ nie jest potrzebna?
mboy
135

To najlepszy, jaki próbowałem:

$(document).ready(function() {
    if (location.hash) {
        $("a[href='" + location.hash + "']").tab("show");
    }
    $(document.body).on("click", "a[data-toggle='tab']", function(event) {
        location.hash = this.getAttribute("href");
    });
});
$(window).on("popstate", function() {
    var anchor = location.hash || $("a[data-toggle='tab']").first().attr("href");
    $("a[href='" + anchor + "']").tab("show");
});
Xavi Martínez
źródło
20
To działa lepiej niż przyjęte rozwiązanie (przez lepsze mam na myśli: kopiuj i wklej działa: D)
Cyril Duchon-Doris
3
najlepsze w historii kopiowanie i wklejanie: P
Ghostff
1
Myślę, że zmiana selektora na "a[data-toggle=tab]"byłaby lepsza. Sposób, w jaki selektor jest teraz napisany, zmienia również adres URL przeglądarki po kliknięciu łącza, na przykład w celu otwarcia modalu.
leifdenby
5
Możesz dodać nawias tekstowy do selektora, na przykład 'a [href = "' + location.hash + '"]'. Natknąłem się na błąd składniowy.
asdacap
1
Korzystanie z tego jak jest skonfliktowany z rozwijanego menu Bootstrap (które używają data-toggle="dropdown". I które zdarza mi się mieć na tej samej stronie z zakładkami w jednym przypadku, jak ktoś zasugerował, po prostu zastępując $(document.body).on("click", "a[data-toggle]", function(event) {z $(document.body).on("click", "a[data-toggle='tab']", function(event) {wystarczyły dla mnie.
Jiveman
44

Mieszanka odpowiedzi innych:

  • Brak skoku po kliknięciu
  • Zapisz na skrócie lokalizacji
  • Zapisz na localStorage (np. W celu przesłania formularza)
  • Po prostu skopiuj i wklej;)

    if (location.hash) {
      $('a[href=\'' + location.hash + '\']').tab('show');
    }
    var activeTab = localStorage.getItem('activeTab');
    if (activeTab) {
      $('a[href="' + activeTab + '"]').tab('show');
    }
    
    $('body').on('click', 'a[data-toggle=\'tab\']', function (e) {
      e.preventDefault()
      var tab_name = this.getAttribute('href')
      if (history.pushState) {
        history.pushState(null, null, tab_name)
      }
      else {
        location.hash = tab_name
      }
      localStorage.setItem('activeTab', tab_name)
    
      $(this).tab('show');
      return false;
    });
    $(window).on('popstate', function () {
      var anchor = location.hash ||
        $('a[data-toggle=\'tab\']').first().attr('href');
      $('a[href=\'' + anchor + '\']').tab('show');
    });
insign
źródło
1
Szkoda, że ​​najpierw wypróbowałem inne rozwiązania - to działa najlepiej!
tdc
2
Najlepsze rozwiązanie, które wypróbowałem z wielu różnych.
Skakanie
4
Skok treści jest nadal dostępny z tą odpowiedzią
shazyriver
2
Doskonałe rozwiązanie: skopiuj, wklej, idź na obiad. Miły.
Gary Stanton,
1
Najlepsze rozwiązanie w historii
szczęśliwy
19

Kod Xaviego działał prawie w pełni. Ale kiedy przechodziłem do innej strony, przesyłając formularz, a potem przekierowywany na stronę z moimi kartami, w ogóle nie ładował zapisanej karty.

localStorage na ratunek (nieznacznie zmieniony kod Nguyen):

$('a[data-toggle="tab"]').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
});

$('a[data-toggle="tab"]').on("shown.bs.tab", function (e) {
    var id = $(e.target).attr("href");
    localStorage.setItem('selectedTab', id)
});

var selectedTab = localStorage.getItem('selectedTab');
if (selectedTab != null) {
    $('a[data-toggle="tab"][href="' + selectedTab + '"]').tab('show');
}
apfz
źródło
2
To jest złoto! Działa nawet z modami! Świetna odpowiedź.
Lech Osiński
2
Ten kod jest fantastyczny i działa świetnie, jeśli chcesz, aby karta pozostała wybrana, nawet jeśli użytkownik opuści witrynę (zakończy sesję) i wróci później. Aby wybór pozostał tylko podczas bieżącej sesji i powrócił do domyślnej karty w następnej sesji, zamień dwa wystąpienia „localStorage” na „sessionStorage”.
Gary.Ray,
Krótkie, przyjemne rozwiązanie do kopiowania i wklejania, które świetnie współpracuje z Bootstrap 4.
Wsparcie CFP
Wow super rozwiązanie!
Jilani A
1
[data-toggle="pill"]na pigułki
mxmissile
13

Ten używa HTML5 localStoragedo przechowywania aktywnej karty

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    localStorage.setItem('activeTab', $(e.target).attr('href'));
});
var activeTab = localStorage.getItem('activeTab');
if (activeTab) {
   $('#navtab-container a[href="' + activeTab + '"]').tab('show');
}

ref: http://www.tutorialrepublic.com/faq/how-to-keep-the-current-tab-active-on-page-reload-in-bootstrap.php https://www.w3schools.com/bootstrap /bootstrap_ref_js_tab.asp

Ajith R Nair
źródło
to fajne, ale wadą jest to, że nie możesz udostępniać linków z aktywną kartą
lfender6445
To jest ładne, zaletą jest to, że nie wprowadza problem gdzie „window.location.hash” Zwiększanie wartości hash do żądania HTTP param w url spowodowanie kolizji i złe param czytane przez innych żądanie HTTP, takich jak podział na strony, itp
Dung
4

Opierając się na odpowiedziach udzielonych przez Xavi Martínez i koppor , wymyśliłem rozwiązanie, które używa skrótu adresu URL lub localStorage w zależności od dostępności tego ostatniego:

function rememberTabSelection(tabPaneSelector, useHash) {
    var key = 'selectedTabFor' + tabPaneSelector;
    if(get(key)) 
        $(tabPaneSelector).find('a[href=' + get(key) + ']').tab('show');

    $(tabPaneSelector).on("click", 'a[data-toggle]', function(event) {
        set(key, this.getAttribute('href'));
    }); 

    function get(key) {
        return useHash ? location.hash: localStorage.getItem(key);
    }

    function set(key, value){
        if(useHash)
            location.hash = value;
        else
            localStorage.setItem(key, value);
    }
}

Stosowanie:

$(document).ready(function () {
    rememberTabSelection('#rowTab', !localStorage);
    // Do Work...
});

Nie nadąża za przyciskiem powrotu, jak ma to miejsce w przypadku rozwiązania Xavi Martínez .

Ziad
źródło
4

Mój kod działa na mnie, używam localStorageHTML5

$('#tabHistory  a').click(function(e) {
  e.preventDefault();
  $(this).tab('show');
});
$("ul.nav-tabs#tabHistory > li > a").on("shown.bs.tab", function(e) {
  var id = $(e.target).attr("href");
  localStorage.setItem('selectedTab', id)
});
var selectedTab = localStorage.getItem('selectedTab');
$('#tabHistory a[href="' + selectedTab + '"]').tab('show');
Nguyen Pham
źródło
4

Wypróbowałem to i działa: (Zastąp to tabletką lub tabletką, której używasz)

    jQuery(document).ready(function() {
        jQuery('a[data-toggle="pill"]').on('show.bs.tab', function(e) {
            localStorage.setItem('activeTab', jQuery(e.target).attr('href'));
        });

        // Here, save the index to which the tab corresponds. You can see it 
        // in the chrome dev tool.
        var activeTab = localStorage.getItem('activeTab');

        // In the console you will be shown the tab where you made the last 
        // click and the save to "activeTab". I leave the console for you to 
        // see. And when you refresh the browser, the last one where you 
        // clicked will be active.
        console.log(activeTab);

        if (activeTab) {
           jQuery('a[href="' + activeTab + '"]').tab('show');
        }
    });

Mam nadzieję, że komuś to pomoże.

Oto wynik: https://jsfiddle.net/neilbannet/ego1ncr5/5/

Neil Bannet
źródło
4

Cóż, to już 2018 rok, ale myślę, że lepiej późno niż wcale (jak tytuł w programie telewizyjnym), lol. Na dole jest kod jQuery, który tworzę podczas mojej pracy magisterskiej.

<script type="text/javascript">
$(document).ready(function(){
    $('a[data-toggle="tab"]').on('show.affectedDiv.tab', function(e) {
        localStorage.setItem('activeTab', $(e.target).attr('href'));
    });
    var activeTab = localStorage.getItem('activeTab');
    if(activeTab){
        $('#myTab a[href="' + activeTab + '"]').tab('show');
    }
});
</script>

a oto kod dla zakładek bootstrap:

<div class="affectedDiv">
    <ul class="nav nav-tabs" id="myTab">
        <li class="active"><a data-toggle="tab" href="#sectionA">Section A</a></li>
        <li><a data-toggle="tab" href="#sectionB">Section B</a></li>
        <li><a data-toggle="tab" href="#sectionC">Section C</a></li>
    </ul>
    <div class="tab-content">
        <div id="sectionA" class="tab-pane fade in active">
            <h3>Section A</h3>
            <p>Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</p>
        </div>
        <div id="sectionB" class="tab-pane fade">
            <h3>Section B</h3>
            <p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam porttitor condimentum nisi, eu viverra ipsum porta ut. Nam hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc facilisis leo at faucibus adipiscing.</p>
        </div>
        <div id="sectionC" class="tab-pane fade">
            <h3>Section C</h3>
            <p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam porttitor condimentum nisi, eu viverra ipsum porta ut. Nam hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc facilisis leo at faucibus adipiscing.</p>
        </div>
    </div>
</div>


Nie zapomnij wywołać bootstrap i innych podstawowych rzeczy 

oto szybkie kody dla Ciebie:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


Przejdźmy teraz do wyjaśnienia:

Kod jQuery w powyższym przykładzie po prostu pobiera wartość atrybutu href elementu, gdy nowa karta została wyświetlona przy użyciu metody jQuery .attr () i zapisuje ją lokalnie w przeglądarce użytkownika za pomocą obiektu localStorage HTML5. Później, gdy użytkownik odświeży stronę, pobiera te dane i aktywuje powiązaną kartę za pomocą metody .tab ('show').

Szukasz przykładów? tutaj jest jeden dla was .. https://jsfiddle.net/Wineson123/brseabdr/

Chciałbym, żeby moja odpowiedź pomogła wam wszystkim… Cheerio! :)

Panie Winson
źródło
2

Ponieważ nie mogę jeszcze komentować, skopiowałem odpowiedź z góry, naprawdę mi to pomogło. Ale zmieniłem to tak, aby działało z plikami cookie zamiast #id, więc chciałem udostępnić zmiany. Umożliwia to przechowywanie aktywnej karty dłużej niż tylko jedno odświeżenie (np. Wielokrotne przekierowanie) lub gdy identyfikator jest już używany i nie chcesz implementować metody podziału koppors.

<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);
    $.cookie('activeTab', id);
});

    // on load of the page: switch to the currently selected tab
    var hash = $.cookie('activeTab');
    if (hash != null) {
        $('#myTab a[href="#' + hash + '"]').tab('show');
    }
</script>
Joeri Landman
źródło
Dziękuję za aktualizację. W rzeczywistości szukałem takiej rozdzielczości, ale wtedy, gdy chciałem, dostałem tylko odpowiedź @koppor jako działającą. W rzeczywistości jest to jeden z najlepszych sposobów, jeśli chcemy użyć funkcji wstecz. Dzięki za aktualizację
Code Lover,
2

Wypróbowałem kod oferowany przez Xavi Martínez . Zadziałało, ale nie dla IE7. Problem w tym, że zakładki nie odnoszą się do żadnych istotnych treści.
Więc wolę ten kod do rozwiązania tego problemu.

function pageLoad() {
  $(document).ready(function() {

    var tabCookieName = "ui-tabs-1"; //cookie name
    var location = $.cookie(tabCookieName); //take tab's href

    if (location) {
      $('#Tabs a[href="' + location + '"]').tab('show'); //activate tab
    }

    $('#Tabs a').click(function(e) {
      e.preventDefault()
      $(this).tab('show')
    })

    //when content is alredy shown - event activate 
    $('#Tabs a').on('shown.bs.tab', function(e) {
      location = e.target.hash; // take current href
      $.cookie(tabCookieName, location, {
        path: '/'
      }); //write href in cookie
    })
  });
};
Vitalii Isaenko
źródło
to fajne, ale wadą jest to, że nie możesz udostępniać linków z aktywną kartą
lfender6445
1

Dzięki za udostępnienie.

Czytając wszystkie rozwiązania. Wymyśliłem rozwiązanie, które wykorzystuje skrót adresu URL lub localStorage w zależności od dostępności tego ostatniego z poniższym kodem:

$(function(){
    $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
        localStorage.setItem('activeTab', $(e.target).attr('href'));
    })

    var hash = window.location.hash;
    var activeTab = localStorage.getItem('activeTab');

    if(hash){
          $('#project-tabs  a[href="' + hash + '"]').tab('show');   
    }else if (activeTab){
        $('#project-tabs a[href="' + activeTab + '"]').tab('show');
    }
});
Vaibhav
źródło
1

W przypadku wersji Bootstrap 4.3.1. Spróbuj poniżej:

$(document).ready(function() {
    var pathname = window.location.pathname; //get the path of current page
    $('.navbar-nav > li > a[href="'+pathname+'"]').parent().addClass('active');
})
gkc123
źródło
0

Używając html5, ułożyłem to:

Gdzie na stronie:

<h2 id="heading" data-activetab="@ViewBag.activetab">Some random text</h2>

Viewbag powinien zawierać tylko identyfikator strony / elementu, np .: "testing"

Utworzyłem plik site.js i dodałem skrypt na stronie:

/// <reference path="../jquery-2.1.0.js" />
$(document).ready(
  function() {
    var setactive = $("#heading").data("activetab");
    var a = $('#' + setactive).addClass("active");
  }
)

Teraz wszystko, co musisz zrobić, to dodać swoje identyfikatory do paska nawigacyjnego. Na przykład.:

<ul class="nav navbar-nav">
  <li **id="testing" **>
    @Html.ActionLink("Lalala", "MyAction", "MyController")
  </li>
</ul>

Wszyscy witają atrybut danych :)

Theodor Alexander Hkansson Hei
źródło
0

Oprócz odpowiedzi Xavi Martínez unikającej skoku po kliknięciu

Unikanie skoku

$(document).ready(function(){

    // show active tab

    if(location.hash) {

        $('a[href=' + location.hash + ']').tab('show');
    }

    // set hash on click without jumb

    $(document.body).on("click", "a[data-toggle]", function(e) {

        e.preventDefault();

        if(history.pushState) {

            history.pushState(null, null, this.getAttribute("href"));
        }
        else {

            location.hash = this.getAttribute("href");
        }

        $('a[href=' + location.hash + ']').tab('show');

        return false;
    });
});

// set hash on popstate

$(window).on('popstate', function() {

    var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href");

    $('a[href=' + anchor + ']').tab('show');
});

Zagnieżdżone karty

implementacja ze znakiem „_” jako separatorem

$(document).ready(function(){

    // show active tab

    if(location.hash) {

        var tabs = location.hash.substring(1).split('_');

        $.each(tabs,function(n){

            $('a[href=#' + tabs[n] + ']').tab('show');
        });         

        $('a[href=' + location.hash + ']').tab('show');
    }

    // set hash on click without jumb

    $(document.body).on("click", "a[data-toggle]", function(e) {

        e.preventDefault();

        if(history.pushState) {

            history.pushState(null, null, this.getAttribute("href"));
        }
        else {

            location.hash = this.getAttribute("href");
        }

        var tabs = location.hash.substring(1).split('_');

        //console.log(tabs);

        $.each(tabs,function(n){

            $('a[href=#' + tabs[n] + ']').tab('show');
        });

        $('a[href=' + location.hash + ']').tab('show');

        return false;
    });
});

// set hash on popstate

$(window).on('popstate', function() {

    var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href");

    var tabs = anchor.substring(1).split('_');

    $.each(tabs,function(n){

        $('a[href=#' + tabs[n] + ']').tab('show');
    });

    $('a[href=' + anchor + ']').tab('show');
});
RafaSashi
źródło
0

Użyliśmy wyzwalacza jquery, aby załadować skrypt, który nacisnął przycisk za nas

$ (". nazwa_klasy"). wyzwalacz ('klik');

Dan Kaiser
źródło
0

Biada, jest na to tak wiele sposobów. Wymyśliłem to, krótkie i proste. Mam nadzieję, że to pomoże innym.

  var url = document.location.toString();
  if (url.match('#')) {
    $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
  } 

  $('.nav-tabs a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash;
    if(e.target.hash == "#activity"){
      $('.nano').nanoScroller();
    }
  })
user752746
źródło
0

Istnieje rozwiązanie po ponownym załadowaniu strony i pozostawieniu oczekiwanej karty jako wybranej.

Załóżmy, że po zapisaniu danych przekierowany adres URL to: my_url # tab_2

Teraz za pomocą następującego skryptu oczekiwana karta pozostanie wybrana.

$(document).ready(function(){
    var url = document.location.toString();
    if (url.match('#')) {
        $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
        $('.nav-tabs a').removeClass('active');
    }
});
Hasib Kamal
źródło
Tam aktywna klasa jest automatycznie przypisywana do tagu kotwicy, dlatego jest usuwana przez $ ('. Nav-tabs a'). RemoveClass ('active'); ten skrypt.
Hasib Kamal