Zakładki Twitter Bootstrap: przejdź do konkretnej karty na stronie Przeładuj lub hiperłącze

UPDATE

Dla Bootstrap 3 Zmień .on('shown', ...) na .on('shown.bs.tab', ....)

To jest oparte na @ dubbe odpowiedź i ta tak przyjęta odpowiedź. Rozwiązuje problem z window.scrollTo(0,0) nie działa poprawnie. Problem polega na tym, że po zastąpieniu skrótu url na wyświetlonej karcie przeglądarka przewija do tego skrótu, ponieważ jest elementem na stronie. Aby to obejść, dodaj prefiks, aby hash nie odwoływał się do rzeczywistego elementu strony

// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
    $('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('show');
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});

Przykład użyj

Jeśli masz tab-pane z id="mytab" musisz umieścić swój link w ten sposób:

<a href="yoursite.com/#tab_mytab">Go to Specific Tab </a>

Możesz wywołać zdarzenie click na odpowiedniej zakładce link:

$(document).ready(function(){

  if(window.location.hash != "") {
      $('a[href="' + window.location.hash + '"]').click()
  }

});

Jest to ulepszona implementacja rozwiązania dubbe, które zapobiega przewijaniu.

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

// With HTML5 history API, we can easily prevent scrolling!
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    if(history.pushState) {
        history.pushState(null, null, e.target.hash); 
    } else {
        window.location.hash = e.target.hash; //Polyfill for old browsers
    }
})

Podczas gdy dostarczone rozwiązanie JavaScript może działać, poszedłem w nieco inny sposób, który nie wymaga dodatkowego JavaScript, ale wymaga logiki w Twojej opinii. Tworzysz link ze standardowym parametrem URL, takim jak:

<a href = "http://link.to.yourpage?activeTab=home">My Link</a>

Następnie po prostu wykrywasz wartość activeTab, aby zapisać 'class=" active "' w odpowiednim <li>

Pseudocode (zaimplementuj odpowiednio w swoim języku). Uwaga ustawiłem zakładkę "home" jako domyślną aktywną, jeśli nie podano w niej parametru przykład.

$activetabhome = (params.activeTab is null or params.activeTab == 'home') ? 'class="active"' : '';
$activetabprofile = (params.activeTab == 'profile') ? 'class="active"' : '';

<li $activetabhome><a href="#home">Home</a></li>
<li $activetabprofile><a href="#profile">Profile</a></li>

Dla Bootstrap 3:

$('.nav-tabs a[href="#' + tabID + '"]').tab('show');

Https://jsfiddle.net/DTcHh/6638/

Działa to w Bootstrap 3 i poprawia 2 najlepsze odpowiedzi dubbe 'a i flynfish 'a poprzez integrację odpowiedzi GarciaWebDev' a (która pozwala na parametry url po hashu i jest prosto od autorów Bootstrap na GitHub issue tracker):

// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";

if (hash) {
    hash = hash.replace(prefix,'');
    var hashPieces = hash.split('?');
    activeTab = $('.nav-tabs a[href=' + hashPieces[0] + ']');
    activeTab && activeTab.tab('show');
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});

Nie jestem wielkim fanem if...else; więc wziąłem prostsze podejście.

$(document).ready(function(event) {
    $('ul.nav.nav-tabs a:first').tab('show'); // Select first tab
    $('ul.nav.nav-tabs a[href="'+ window.location.hash+ '"]').tab('show'); // Select tab by name if provided in location hash
    $('ul.nav.nav-tabs a[data-toggle="tab"]').on('shown', function (event) {    // Update the location hash to current tab
        window.location.hash= event.target.hash;
    })
});

1. Wybierz domyślną kartę (zwykle pierwszą)
2. Przełącz na tab (jeśli taki element jest rzeczywiście obecny; niech jQuery go obsłuży); nic się nie dzieje, jeśli podany jest niewłaściwy hash
3. [opcjonalne] zaktualizuj hash, jeśli inna karta zostanie wybrana ręcznie

Nie adresuje przewijania do żądanego hasha; ale powinno to?

Ten kod wybiera właściwą kartę w zależności od # hash i dodaje właściwy # hash po kliknięciu karty. (this uses jquery)

W Coffeescript:

$(document).ready ->
    if location.hash != ''
        $('a[href="'+location.hash+'"]').tab('show')

    $('a[data-toggle="tab"]').on 'shown', (e) ->
        location.hash = $(e.target).attr('href').substr(1)

Lub w JS:

$(document).ready(function() {
    if (location.hash !== '') $('a[href="' + location.hash + '"]').tab('show');
    return $('a[data-toggle="tab"]').on('shown', function(e) {
      return location.hash = $(e.target).attr('href').substr(1);
    });
});

$(function(){
  var hash = window.location.hash;
  hash && $('ul.nav a[href="' + hash + '"]').tab('show');
});

Ten kod z http://github.com/twitter/bootstrap/issues/2415#issuecomment-4450768 zadziałało dla mnie idealnie.

@flynfish + @ ztyx rozwiązanie, którego używam do zagnieżdżania kart:

    handleTabLinks();

    function handleTabLinks() {
        if(window.location.hash == '') {
            window.location.hash = window.location.hash + '#_';
        }
        var hash = window.location.hash.split('#')[1];
        var prefix = '_';
        var hpieces = hash.split('/');
        for (var i=0;i<hpieces.length;i++) {
            var domelid = hpieces[i].replace(prefix,'');
            var domitem = $('a[href=#' + domelid + '][data-toggle=tab]');
            if (domitem.length > 0) {
                domitem.tab('show');
            }
        }
        $('a[data-toggle=tab]').on('shown', function (e) {
            if ($(this).hasClass('nested')) {
                var nested = window.location.hash.split('/');
                window.location.hash = nested[0] + '/' + e.target.hash.split('#')[1];
            } else {
                window.location.hash = e.target.hash.replace('#', '#' + prefix);
            }
        });
    }

Dzieci powinny mieć class= "zagnieżdżone"

Sugerowałbym użycie kodu dostarczonego przez autorów Bootstrap na ich trackerze issue tracker na GitHub :

var hash = location.hash
  , hashPieces = hash.split('?')
  , activeTab = $('[href=' + hashPieces[0] + ']');
activeTab && activeTab.tab('show');

Możesz znaleźć w linku do numeru więcej informacji o tym, dlaczego nie zdecydowali się na wsparcie tego.

Dziękujemy za podzielenie się swoimi poglądami.

Przez odczytanie wszystkich rozwiązań. Wymyśliłem rozwiązanie, które używa skrótu 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');
    }
});

Oto, co zrobiłem, naprawdę proste, i pod warunkiem, że linki do kart mają identyfikator powiązany z nimi, możesz uzyskać atrybut href i przekazać go do funkcji, która pokazuje zawartość kart:

<script type="text/javascript">
        jQuery(document).ready(function() {
            var hash = document.location.hash;
            var prefix = "tab_";
            if (hash) {
                var tab = jQuery(hash.replace(prefix,"")).attr('href');
                jQuery('.nav-tabs a[href='+tab+']').tab('show');
            }
        });
        </script>

Następnie w twoim adresie url możesz dodać hash jako coś w stylu: # tab_tab1, część 'tab_' jest usuwana z samego hasha, więc ID rzeczywistego łącza karty w nav-tabs (tabid1) jest umieszczony po tym, więc twój adres URL będzie wyglądał jak: www.mydomain.com/index.php#tab_tabid1.

To działa idealnie dla mnie i mam nadzieję, że pomoże komuś innemu: -)

Bazując na rozwiązaniu Demircan Celebi; chciałem, aby zakładka otwierała się podczas modyfikowania adresu url i otwierała zakładkę bez konieczności przeładowywania strony z serwera.

<script type="text/javascript">
    $(function() {
        openTabHash(); // for the initial page load
        window.addEventListener("hashchange", openTabHash, false); // for later changes to url
    });


    function openTabHash()
    {
        console.log('openTabHash');
        // Javascript to enable link to tab
        var url = document.location.toString();
        if (url.match('#')) {
            $('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;
        } 

        // With HTML5 history API, we can easily prevent scrolling!
        $('.nav-tabs a').on('shown.bs.tab', function (e) {
            if(history.pushState) {
                history.pushState(null, null, e.target.hash); 
            } else {
                window.location.hash = e.target.hash; //Polyfill for old browsers
            }
        })
    }
</script>

Wypróbowałem kilka sposobów omówionych powyżej i skończyło się następującym rozwiązaniem roboczym, po prostu skopiuj i wklej w edytorze, aby spróbować. Aby przetestować wystarczy zmienić hash do skrzynki odbiorczej, skrzynki nadawczej, skomponować adres url i nacisnąć klawisz enter.

<html>
    <head>
        <link type='text/css' rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' />
        <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container body-content">
            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#inbox">Inbox</a></li>
                <li><a data-toggle="tab" href="#outbox">Outbox</a></li>
                <li><a data-toggle="tab" href="#compose">Compose</a></li>
            </ul>
            <div class="tab-content">
                <div id="inbox" class="tab-pane fade in active">
                    Inbox Content
                </div>
                <div id="outbox" class="tab-pane fade">
                    Outbox Content
                </div>
                <div id="compose" class="tab-pane fade">
                    Compose Content
                </div>
            </div>
        </div>
        <script>
            $(function () {
                var hash = window.location.hash;
                hash && $('ul.nav a[href="' + hash + '"]').tab('show');
            });
        </script>
    </body>
</html>

To jest moje rozwiązanie do obsługi zagnieżdżonych kart. Właśnie dodałem funkcję, aby sprawdzić, czy aktywna karta ma kartę nadrzędną do aktywacji. Jest to funkcja:

function activateParentTab(tab) {
    $('.tab-pane').each(function() {
        var cur_tab = $(this);
        if ( $(this).find('#' + tab).length > 0 ) {
            $('.nav-tabs a[href=#'+ cur_tab.attr('id') +']').tab('show');
            return false;
        }
    });
}

I można go tak nazwać (na podstawie rozwiązania @ flynfish):

var hash = document.location.hash;
var prefix = "";
if (hash) {
    $('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show');
    activateParentTab(hash);
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});

To rozwiązanie działa całkiem dobrze dla mnie w tej chwili. Mam nadzieję, że przyda się to komuś innemu;)

Musiałem zmodyfikować kilka bitów, aby to działało dla mnie. Używam Bootstrap 3 i jQuery 2

// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "!";
if (hash) {
    hash = hash.replace(prefix,'');
    var hashPieces = hash.split('?');
    activeTab = $('[role="tablist"] a[href=' + hashPieces[0] + ']');
    activeTab && activeTab.tab('show');
}

// Change hash for page-reload
$('[role="tablist"] a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});

Właśnie miałem ten problem, ale musiałem obsłużyć wiele poziomów kart. Kod jest raczej brzydki( patrz komentarze), ale robi swoje: https://gist.github.com/JensRantil/4721860 Mam nadzieję, że ktoś inny uzna to za przydatne (i zapraszam do zaproponowania lepszych rozwiązań!).

Łącząc peices z innych odpowiedzi, oto rozwiązanie, które może otworzyć wiele poziomów zagnieżdżonych kart:

// opens all tabs down to the specified tab
var hash = location.hash.split('?')[0];
if(hash) {
  var $link = $('[href=' + hash + ']');
  var parents = $link.parents('.tab-pane').get();
  $(parents.reverse()).each(function() {
    $('[href=#' + this.id + ']').tab('show') ;
  });
  $link.tab('show');
}

Robię sth tak dla linków z Ajaxem #!# (np./test.com#!#test3) ale możesz go modyfikować jak chcesz

$(document).ready(function() {

       let hash = document.location.hash;
       let prefix = "!#";

       //change hash url on page reload
       if (hash) {
         $('.nav-tabs a[href=\"'+hash.replace(prefix,"")+'\"]').tab('show');
       } 

       // change hash url on switch tab
       $('.nav-tabs a').on('shown.bs.tab', function (e) {
          window.location.hash = e.target.hash.replace("#", "#" + prefix);
       });
 });

Przykład z prostą stroną na Githubie tutaj

Jeśli ma to znaczenie dla kogokolwiek, poniższy kod jest mały i działa bezbłędnie, aby uzyskać pojedynczą wartość skrótu z adresu URL i pokazać, że:

<script>
    window.onload = function () {
        let url = document.location.toString();
        let splitHash = url.split("#");
        document.getElementById(splitHash[1]).click();
    };
</script>

Pobiera identyfikator i uruchamia Zdarzenie click. Proste.