Die Verknüpfung zu einer Bootstrap-Registerkarte von außen - wie stellen Sie die Registerkarte "aktiv"?

Ich habe eine Bootstrap "- Registerkarte" navigation mit 3 verschiedenen content-tabs. Es funktioniert perfekt, außer, dass ich möchte, um einen link auf eine der Registerkarten aus, die AUßERHALB der tab-navigation. Was bedeutet, dass, wenn jemand klickt auf einen link, die außerhalb des tab-Fenster, es sollte auf "aktiv" gesetzt, die Registerkarte, und zeigen Sie den Inhalt.

Gerade jetzt, es zeigt den Inhalt der Registerkarte korrekt, aber das Register ist nicht auf "aktiv" gesetzt. Wie kann ich erreichen, dass es als "aktiv" als hätte jemand angeklickt?

Hier ist der code:

<div>
<ul class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="home">Home Content</div>
  <div class="tab-pane" id="profile">Profile Content</div>
  <div class="tab-pane" id="messages">Messages Content</div>
</div>
</div>

<p></p>

<a href="#profile" data-toggle="tab">Profile Link From Outside</a>

Machte ich ein jsFiddle zu zeigen, dass es besser: http://jsfiddle.net/fLJ9E/

Vielen Dank für jede Hilfe oder Hinweise 🙂

InformationsquelleAutor user1227914 | 2013-11-06
  1. 15

    Können Sie einen kleinen trick, um dies zu erreichen:

    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var target = this.href.split('#');
    $('.nav a').filter('[href="#'+target[1]+'"]').tab('show');
})

    http://jsfiddle.net/s6bP9/

    • Das funktionierte perfekt, ich danke Ihnen sehr 🙂
    • Perfekte Lösung.
    • Gibt es nicht eine Möglichkeit, nur HTML-tags verwenden, um dies zu tun, statt eines JQuery-oder JavaScript-Lösung? Wie zum Beispiel data-target="#Profil" data-toggle="tab" ? Ist das ein bug von bootstrap?
    InformationsquelleAutor claustrofob
  2. 8

    Ich hatte das gleiche Problem, und entschied sich nur auslösen, ein click-Ereignis auf der entsprechenden Registerkarte, und lassen Bootstrap tun, was erforderlich ist.

    $('#link').on('click', function(){
  $('.nav-tabs a[href="#profile"]').click();
});
    • Ich würde neigen zu so etwas wie diesem, wenn man bedenkt $('#someTab').tab('show') von docs nicht wirklich scheinen, um die aktiven Zustand auf die Registerkarte Steuerelemente.
    InformationsquelleAutor Omiod
  3. 6

    Die einfachste Antwort ist, es zu tun mögen dieses:

    <a href="#" id="profilelink">Profile Link From Outside</a>

    dann in javascript hinzufügen:

    $(document).ready(function () {
    $("#profilelink").click(function () {
        $('.nav a[href="#profile"]').tab('show');           
    });
});

    Dies wird sich ändern, sowohl in der Inhalts-Ansicht und der aktiven Taste auf der Oberseite mit der eingebauten Methode des jquery tabs plugin. Wenn Sie wollte, um weitere Schaltflächen hinzuzufügen, die außerhalb der tab-Bereich, dann machen Sie es mehr allgemein zB.

    <a href="#profile" class="outsidelink">Profile Link From Outside</a>


$(document).ready(function () {
    $(".outsidelink").click(function () {
        $('.nav a[href="' +  $(this).attr("href") + '"]').tab('show');          
    });
});
    • auch, wenn Sie mehr als ein tab-panel auf der Seite, dann müssen Sie die panel-id und ändern .nav zu #panelid in der javascript.
    • Gibt es nicht eine Möglichkeit, nur HTML-tags verwenden, um dies zu tun, statt eines JQuery-oder JavaScript-Lösung? Wie zum Beispiel data-target="#Profil" data-toggle="tab" ? Ist das ein bug von bootstrap?
    InformationsquelleAutor Myke Black
  4. 1

    Unterhalb des kleinen trick, den ich habe, das funktioniert für mich.

    Kann ich rufen Sie die Webseite hinzufügen der bootstrap-Pille-id an die URL an.

    Beispielsweise den Aufruf mypage.html#other_id wird die Anzeige der Pille matching #other_id

    <ul class="nav nav-pills">
    <li class="active"><a href="#default_id" data-toggle="pill">Default tab</a></li>
    <li><a href="#other_id" data-toggle="pill">Other tab</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="default_id">
    ...
    </div>
    <div class="tab-pane" id="other_id">
    ...
    </div>
</div>

    Hier der JQuery-code: 

    $(document).ready(function(){
    //Manage hash in URL to open the right pill
    var hash = window.location.hash;
    //If a hash is provided 
    if(hash && hash.length>0)
    {
        //Manage Pill titles
        $('ul.nav-pills li a').each(function( index ) {
            if($(this).attr('href')==hash)
                $(this).parent('li').addClass('active');
            else
                $(this).parent('li').removeClass('active');
        });
        //Manage Tab content
        var hash = hash.substring(1); //Remove the #
        $('div.tab-content div').each(function( index ) {
            if($(this).attr('id')==hash)
                $(this).addClass('active');
            else
                $(this).removeClass('active');
        });
    }
});

    Edit: Mein code ist nicht gerade das, was Sie brauchen, aber Sie können es zu aktualisieren, um Ihre Bedürfnisse anzupassen. Sagen Sie mir, wenn Sie brauchen Erklärungen

    InformationsquelleAutor Manu L
  5. 0

    Müssen wahrscheinlich nur addieren/subtrahieren-Klassen, wenn Sie einen externen link einfügen. Es ist nicht wirklich gebunden, um die Registerkarte all.

    $(".outside-link").click(function() {
    $(".nav li").removeClass("active");
    $($(this).attr("data-toggle-tab")).parent("li").addClass("active");
});

    Arbeiten Fiddle: http://jsfiddle.net/Bp2jm/

    • Danke für Eure Antworten 🙂
    InformationsquelleAutor James_1x0
  6. 0

    Versuchen Sie dies:

    <li ....> 
<a href="#tab-number">Tab Title</a>
</li>

    und Sie Ihre url wie folgt Aussehen: "[URL]#tab-Nummer"

    Ich hoffe Euch helfen....
    Bezug...

    InformationsquelleAutor amedriveroperez
  7. 0

    Basierend auf Omiod Antwort,
    (Ich habe nicht genug rep ein Kommentar -- doh!)

    Einen one-liner, das gleiche zu tun, ohne extra script markup:

    <a href="javascript:void(0);" onclick="$('.nav-tabs a[href=\'#TABID\']').click();">LINK NAME</a>
    InformationsquelleAutor Jules
Schreibe einen Kommentar