it-swarm.com.de

Twitter Bootstrap Registerkarten: Gehen Sie auf der Registerkarte "Seite neu laden" oder "Hyperlink" zur Registerkarte "Bestimmte"

Ich entwickle eine Webseite, auf der ich das Bootstrap Framework von Twitter und deren Bootstrap Tabs JS verwende. Es funktioniert hervorragend, bis auf ein paar kleinere Probleme. Eines davon ist, dass ich nicht weiß, wie ich von einem externen Link direkt zu einem bestimmten Tab gehe. Zum Beispiel:

<a href="facility.php#home">Home</a>
<a href="facility.php#notes">Notes</a>

sollte auf die Registerkarte "Startseite" bzw. "Notizen" gehen , wenn auf die Links von einer externen Seite geklickt wird

335
mraliks

Hier ist meine Lösung für das Problem, vielleicht etwas spät. Aber es könnte vielleicht anderen helfen:

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

// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash;
})
563
dubbe

UPDATE

Ändern Sie für Bootstrap 3 .on('shown', ...) in .on('shown.bs.tab', ....)


Dies basiert auf der @ dubbe Antwort und dieser SO akzeptierte Antwort . Es behebt das Problem, wenn window.scrollTo(0,0) nicht richtig funktioniert. Das Problem ist, dass der Browser beim Ersetzen des angezeigten URL-Hashs auf der Registerkarte zu diesem Hash scrollen wird, da er ein Element auf der Seite ist. Um dies zu umgehen, fügen Sie ein Präfix hinzu, damit der Hash nicht auf ein tatsächliches Seitenelement verweist

// 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);
});

Anwendungsbeispiel

Wenn Sie einen Tabulator mit id = "mytab" haben, müssen Sie Ihren Link folgendermaßen einfügen:

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

sie könnten ein click -Ereignis auf dem entsprechenden Tab-Link auslösen:

$(document).ready(function(){

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

});
50
Marian Theisen

Dies ist eine verbesserte Implementierung der Dubbe-Lösung, die das Scrollen verhindert.

// 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
    }
})
42
Demircan Celebi

Obwohl die bereitgestellte JavaScript-Lösung möglicherweise funktioniert, habe ich einen etwas anderen Weg eingeschlagen, für den kein zusätzliches JavaScript erforderlich ist, für den jedoch in Ihrer Ansicht Logik erforderlich ist. Sie erstellen einen Link mit einem Standard-URL-Parameter wie:

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

Dann ermitteln Sie einfach den Wert von activeTab, um 'class = "active"' in den entsprechenden <li> zu schreiben.

Pseudocode (entsprechend in Ihrer Sprache implementieren). Hinweis: Ich habe die Registerkarte "Home" als Standardeinstellung aktiviert, wenn in diesem Beispiel kein Parameter angegeben wurde.

$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>
18
Peter

Für Bootstrap 3:

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

https://jsfiddle.net/DTcHh/6638/

10
Razan Paul

Ich bin kein großer Fan von if ... else; Also habe ich einen einfacheren Ansatz gewählt.

$(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. Wähle einen Standard-Tab (normalerweise den ersten)
  2. Wechseln Sie zur Registerkarte (wenn ein solches Element tatsächlich vorhanden ist, lassen Sie jQuery damit umgehen). Es passiert nichts, wenn ein falscher Hash angegeben wird
  3. [Optional] Aktualisieren Sie den Hash, wenn eine andere Registerkarte manuell ausgewählt wird

Das Scrollen zum angeforderten Hash wird nicht behandelt. aber sollte es?

9
visitsb

Dies funktioniert in Bootstrap 3 und verbessert die 2 wichtigsten Antworten von Dubbe und Flynfish, indem auch die Antwort von GarciaWebDev integriert wird (die URL-Parameter nach dem Hash zulässt und direkt von Bootstrap Autoren stammt) auf dem 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);
});
7
greggdavis

Dieser Code wählt die rechte Registerkarte in Abhängigkeit vom #hash aus und fügt die rechte #hash hinzu, wenn auf eine Registerkarte geklickt wird. (dies benutzt jquery)

In 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)

oder in 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);
    });
});
6
Sucrenoir

Aufbauend auf der Lösung von Demircan Celebi; Ich wollte, dass sich die Registerkarte öffnet, wenn ich die URL ändere und die Registerkarte öffne, ohne die Seite erneut vom Server laden zu müssen.

<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>
6
Gavin
$(function(){
  var hash = window.location.hash;
  hash && $('ul.nav a[href="' + hash + '"]').tab('show');
});

Dieser Code von http://github.com/Twitter/bootstrap/issues/2415#issuecomment-4450768 hat bei mir perfekt funktioniert.

5
tomaszbak

Vielen Dank für Ihre Meinung.

Durch das Lesen aller Lösungen. Ich habe eine Lösung gefunden, die den URL-Hash oder localStorage verwendet, abhängig von der Verfügbarkeit des letzteren mit folgendem Code:

$(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');
    }
});
5
Vaibhav

@flynfish + @Ztyx-Lösung, die ich für verschachtelte Registerkarten verwende:

    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);
            }
        });
    }

kinder sollten class = "nested" haben

5
Artem Kashin

Ich würde vorschlagen, dass Sie den von Bootstrap Autoren bereitgestellten Code für den Issue-Tracker auf GitHub verwenden :

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

Unter dem Link zur Ausgabe finden Sie weitere Informationen darüber, warum sie dies nicht unterstützt haben.

Probieren Sie einige der oben beschriebenen Möglichkeiten aus und erhalten Sie die folgende funktionierende Lösung. Kopieren Sie sie und fügen Sie sie in Ihren Editor ein, um sie zu testen. Zum Testen einfach den Hash in Posteingang und Postausgang ändern, die URL eingeben und die Eingabetaste drücken.

<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>

Ich hoffe, das spart Ihnen Zeit.

4
Abhimanyu

Hier ist, was ich getan habe, ganz einfach: Wenn Ihre Tab-Links eine ID haben, können Sie das href-Attribut abrufen und an die Funktion übergeben, die den Tab-Inhalt anzeigt:

<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>

Dann können Sie in Ihrer URL den Hash wie folgt hinzufügen: # tab_tab1, der 'tab_'-Teil wird aus dem Hash selbst entfernt, sodass die ID des tatsächlichen Tab-Links in den nav-tabs (tabid1) danach platziert wird Die URL würde ungefähr so ​​aussehen: www.mydomain.com/index.php#tab_tabid1.

Das funktioniert perfekt für mich und ich hoffe es hilft jemand anderem :-)

3
Derek Buntin

Gib einfach diesen Code auf deiner Seite ein:

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

  $('.nav-tabs a').click(function (e) {
    $(this).tab('show');
    var scrollmem = $('body').scrollTop();
    window.location.hash = this.hash;
    $('html,body').scrollTop(scrollmem);
  });
});
2

Ich musste ein paar Bits ändern, damit dies für mich funktioniert. Ich verwende Bootstrap 3 und 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);
});
2
ruifn

Dies ist meine Lösung für den Umgang mit verschachtelten Registerkarten. Ich habe gerade eine Funktion hinzugefügt, um zu überprüfen, ob die aktive Registerkarte eine zu aktivierende übergeordnete Registerkarte enthält. Dies ist die Funktion:

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;
        }
    });
}

Und kann wie folgt aufgerufen werden (Basierend auf @ flynfishs Lösung):

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);
});

Diese Lösung funktioniert für mich im Moment ganz gut. Hoffe das kann für jemand anderen nützlich sein;)

2
Stefano Marra

Ich hatte gerade dieses Problem, musste aber mehrere Registerkartenebenen verarbeiten. Der Code ist ziemlich hässlich (siehe Kommentare), macht aber seine Arbeit: https://Gist.github.com/JensRantil/472186 Hoffentlich findet ihn jemand anderes nützlich (und kann gerne bessere Lösungen vorschlagen) !).

1
Ztyx

Hier finden Sie eine Lösung, die Teile aus anderen Antworten kombiniert und viele Ebenen verschachtelter Registerkarten öffnen kann:

// 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');
}
1
cweston

Wenn es jemanden interessiert, ist der folgende Code klein und funktioniert einwandfrei, um einen einzelnen Hash-Wert aus der URL zu erhalten und dies zu zeigen:

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

es ruft die ID ab und löst das Click-Ereignis aus. Einfach.

0
Samim

Ich mache so etwas für Links mit ajax #!# (z. B./test.com#!#test3), aber Sie können es ändern, was Sie wollen

$(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);
       });
 });

Beispiel mit einfacher Seite auf Github hier

0
eudaimonia

Ich weiß, dass dieser Thread sehr alt ist, aber ich lasse hier meine eigene Implementierung:

$(function () {
  // some initialization code

  addTabBehavior()
})

// Initialize events and change tab on first page load.
function addTabBehavior() {
  $('.nav-tabs a').on('show.bs.tab', e => {
    window.location.hash = e.target.hash.replace('nav-', '')
  })

  $(window).on('popstate', e => {
    changeTab()
  })

  changeTab()
}

// Change the current tab and URL hash; if don't have any hash
// in URL, so activate the first tab and update the URL hash.
function changeTab() {
  const hash = getUrlHash()

  if (hash) {
    $(`.nav-tabs a[href="#nav-${hash}"]`).tab('show')
  } else {
    $('.nav-tabs a').first().tab('show')
  }
}

// Get the hash from URL. Ex: www.example.com/#tab1
function getUrlHash() {
  return window.location.hash.slice(1)
}

Beachten Sie, dass ich ein nav- Klassenpräfix für Navigationslinks verwende.

0
Renan Coelho