Twitter Bootstrap - Tabs - URL ändert sich nicht

Ich benutze Twitter Bootstrap und seine "Tabs".

Ich habe folgenden Code:

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#add">add</a></li>
    <li><a data-toggle="tab" href="#edit" >edit</a></li>
    <li><a data-toggle="tab" href="#delete" >delete</a></li>
</ul>

Die Registerkarten funktionieren ordnungsgemäß, aber in der URL wird nicht #add, #edit, #delete hinzugefügt.

Wenn ich data-toggledie URL-Änderungen entferne , funktionieren die Registerkarten jedoch nicht.

Irgendwelche Lösungen dafür?

Versuchen Sie diesen Code. Es fügt Tab href zu URL hinzu + öffnet Tab basierend auf Hash beim Laden der Seite:

$(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() || $('html').scrollTop();
    window.location.hash = this.hash;
    $('html,body').scrollTop(scrollmem);
  });
});

Für eine Komplettlösung sind drei Komponenten erforderlich:

1. Zeigen Sie beim Laden der Seite die richtige Registerkarte an, wenn die URL einen Hash enthält.
2. Ändern des Hashs in der URL, wenn die Registerkarte geändert wird.
3. Ändern Sie die Registerkarte, wenn sich der Hash in der URL ändert (Schaltflächen Zurück / Vorwärts), und stellen Sie sicher, dass die erste Registerkarte korrekt durchlaufen wird.

Ich denke, keiner der Kommentare hier oder die akzeptierte Antwort behandeln all diese Szenarien.

Da es einiges zu tun gibt, denke ich, dass es als kleines jQuery-Plugin am besten ist: https://github.com/aidanlister/jquery-stickytabs

Sie können das Plugin folgendermaßen aufrufen:

$('.nav-tabs').stickyTabs();

Ich habe dafür einen Blog-Beitrag verfasst: http://aidanlister.com/2014/03/persisting-the-tab-state-in-bootstrap/

Using data-toggle="tab" fordert das Plugin auf, die Registerkarten zu behandeln, die dabei preventDefaultdas Ereignis aufrufen ( Code auf Github ).

Sie können Ihre eigene Tab-Aktivierung verwenden und das Ereignis durchlaufen lassen:

$('.nav-tabs a').click(function (e) {
    // No e.preventDefault() here
    $(this).tab('show');
});

Und Sie müssen das Attribut entfernen data-toggle="tab"

Prüfen das Dokument, wenn Sie Zweifel haben.

Da Ihre Ankerelemente den URL-Hash bereits ändern, ist das Abhören des Onhashchange- Ereignisses eine weitere gute Option. Wie bereits erwähnt, funktioniert diese Methode gut mit der Zurück-Schaltfläche des Browsers.

var tabs$ = $(".nav-tabs a");

$( window ).on("hashchange", function() {
    var hash = window.location.hash, // get current hash
        menu_item$ = tabs$.filter('[href="' + hash + '"]'); // get the menu element

    menu_item$.tab("show"); // call bootstrap to show the tab
}).trigger("hashchange");

Wenn Sie das Ereignis direkt nach dem Definieren des Listeners auslösen, wird beim Laden der Seite auch die rechte Registerkarte angezeigt.

Meine Lösung für Ihr Problem:

Fügen Sie data-valuezunächst jedem aLink ein neues Attribut hinzu :

<ul class="nav nav-tabs">
    <li class="active">
        <a data-toggle="tab" href="#tab-add" data-value="#add">add</a>
    </li>
    <li>
        <a data-toggle="tab" href="#tab-edit" data-value="#edit">edit</a>
    </li>
    <li>
        <a data-toggle="tab" href="#tab-delete" data-value="#delete">delete</a>
    </li>
</ul>

Zweitens ändern Sie die IDs von Registerkarten, z. B. von addbis tab-add, und aktualisieren Sie die hrefs mit dem tab-Präfix:

<div class="tab-content">
    <div class="tab-pane" id="tab-add">Add panel</div>
    <div class="tab-pane" id="tab-edit">Edit panel</div>
    <div class="tab-pane" id="tab-delete">Panel panel</div>
</div>

Und schließlich js Code:

<script type="text/javascript">
    $(function () {
        var navTabs = $('.nav-tabs a');
        var hash = window.location.hash;
        hash && navTabs.filter('[data-value="' + hash + '"]').tab('show');

        navTabs.on('shown', function (e) {
            var newhash = $(e.target).attr('data-value');
            window.location.hash = newhash;
        });
    })
</script>

Hier ist jsFiddle - aber es funktioniert nicht wegen des von jsFiddle verwendeten Iframes, aber Sie können die Quelle meiner Lösung lesen.

Das gleiche Problem mit CakePHP mit Bootstrap 3-Registerkarten. Wenn ich mit einer externen URL und einem Anker sende, springt es zu dem Abschnitt, der mein Menü verliert, nachdem viele Lösungen dies überprüft haben ...

danke an: http://ck.kennt-wayne.de/2012/dec/twitter-bootstrap-how-to-fix-tabs

$(document).ready(function()
 {  
//Redirecciona al tab, usando un prefijo al cargar por primera vez, al usar redirect en cake #_Pagos    
//Redirecciona al tab, usando #Pagos
/* Automagically jump on good tab based on anchor; for page reloads or links */
 if(location.hash) 
  {
     $('a[href=' + location.hash + ']').tab('show');         
  }


//Para evitar el bajar al nivel del tab, (al mostrarse el tab subimos)
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) 
{
    location.hash = $(e.target).attr('href').substr(1);
    scrollTo(0,0);      
});



//Actualiza el URL con el anchor o ancla del tab al darle clic
 /* Update hash based on tab, basically restores browser default behavior to
 fix bootstrap tabs */
$(document.body).on("click", "a[data-toggle]", function(event) 
  {
    location.hash = this.getAttribute("href");
  });


//Redirecciona al tab, al usar los botones de regresar y avanzar del navegador.
/* on history back activate the tab of the location hash if exists or the default tab if no hash exists */   
$(window).on('popstate', function() 
{
  //Si se accesa al menu, se regresa al tab del perfil (activo default), fixed conflict with menu
  //var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href");
  var anchor = location.hash;
  $('a[href=' + anchor + ']').tab('show');

});   

});//Fin OnReady

Es gibt auch eine einfache Möglichkeit, auf Hash-Änderungen zu reagieren (z. B. Zurück-Schaltfläche). Fügen Sie der tomaszbak-Lösung einfach einen Listener für Hashchange-Ereignisse hinzu:

$(function(){
  // Change tab on load
  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);
  });

  // Change tab on hashchange
  window.addEventListener('hashchange', function() {
    var changedHash = window.location.hash;
    changedHash && $('ul.nav a[href="' + changedHash + '"]').tab('show');
  }, false);
});

Ich verwende Bootstrap 3.3. * Und keine der oben genannten Lösungen hat mir geholfen, auch nicht als Antwort 1 markiert. Ich habe gerade unten Skript hinzugefügt und gearbeitet.

$(function(){
    var hash = document.location.hash;
    if (hash) {
       $('.navbar-nav a[href="' + hash + '"]').tab('show');
    }
    $('a[data-toggle="tab"]').on('click', function (e) {
       history.pushState(null, null, $(this).attr('href'));
    });
});

Hoffe das hilft dir.

Am einfachsten, vorausgesetzt, Sie verwenden die hierdata-toggle="tab" beschriebene dokumentierte Syntax :

$(document).on('shown.bs.tab', function(event) {
  window.location.hash = $(event.target).attr('href');
});

Wenn Sie Ruby on Rails oder ein anderes serverseitiges Skript verwenden, sollten Sie die anchorOption für Pfade verwenden. Dies liegt daran, dass nach dem Laden der Seite der URL-Hash nicht mehr verfügbar ist. Sie möchten den richtigen Tab über Ihren Link oder Ihre Formularübermittlung angeben.

<%= form_for @foo, url: foo_path(@foo, anchor: dom_id(foo)) do |f| %>
# Or
<%= link_to 'Foo', foo_path(@foo, anchor: dom_id(foo)) %>

Wenn Sie ein Präfix verwenden, um zu verhindern, dass das Fenster zur ID springt:

<%= form_for @foo, url: foo_path(@foo, anchor: "bar_#{dom_id(foo)}") do |f| %>

Dann hast du CoffeeScript:

  hash = document.location.hash
  prefix = 'bar_'
  $('.nav-tabs a[href=' + hash.replace(prefix, '') + ']').tab 'show' if hash
  $('.nav-tabs a').on 'shown.bs.tab', (e) ->
    window.location.hash = e.target.hash.replace '#', '#' + prefix

Oder JavaScript:

var hash, prefix;

hash = document.location.hash;
prefix = 'bar_';

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

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

Dies sollte in Bootstrap 3 funktionieren.

Danke an @tomaszbak für die ursprüngliche Lösung. Da meine Änderungen jedoch abgelehnt wurden und ich seinen Beitrag noch nicht kommentieren kann, werde ich meine leicht verbesserte und besser lesbare Version hier .

Es macht im Grunde das gleiche, aber wenn das Cross-Browser-Kompatibilitätsproblem behoben ist, das ich mit seinem hatte.

$(document).ready(function(){
   // go to hash on window load
   var hash = window.location.hash;
   if (hash) {
       $('ul.nav a[href="' + hash + '"]').tab('show');
   }
   // change hash on click
   $('.nav-tabs a').click(function (e) {
       $(this).tab('show');
       if($('html').scrollTop()){
           var scrollmem = $('html').scrollTop(); // get scrollbar position (firefox)
       }else{
           var scrollmem = $('body').scrollTop(); // get scrollbar position (chrome)
       }
       window.location.hash = this.hash;
       $('html,body').scrollTop(scrollmem); // set scrollbar position
   });
});

Hier ist eine Option, mit history.pushStateder Sie Ihren Browserverlauf verwenden können, um zu einer vorherigen Registerkarte zurückzukehren

  $(document).ready(function() {
  // add a hash to the URL when the user clicks on a tab
  $('a[data-toggle="tab"]').on('click', function(e) {
    history.pushState(null, null, $(this).attr('href'));
  });
  // navigate to a tab when the history changes
  window.addEventListener("popstate", function(e) {
    var activeTab = $('[href=' + location.hash + ']');
    if (activeTab.length) {
      activeTab.tab('show');
    } else {
      $('.nav-tabs a:first').tab('show');
    }
  });
});

Keiner der oben genannten Punkte hat für mich funktioniert. Hier ist also, wie ich meinen zum Laufen gebracht habe:

1. Fügen Sie class="tab-link"allen Links hinzu, die diese Funktionalität benötigen
2. Fügen Sie Ihrem Javascript den folgenden Code hinzu:

    window.addEventListener
    (
        'popstate',
        Funktion (Ereignis)
        {
            tab_change ();
        }}
    );

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

        $ ('.tab-link') .click
        (
            Funktion (e)
            {
                $ (this) .tab ('show');

                var scrollmem = $ ('body') .scrollTop () || $ ('html') .scrollTop ();
                window.location.hash = this.hash;
                $ ('html, body') .scrollTop (scrollmem);

                $ ('ul.nav-tabs a [href = "' + window.location.hash + '"]') .tab ('show');
            }}
        );
    }}

Ich habe verstanden, dass OP die Verwendung von JQuery sagte, aber Sie können einfach Vanilla JS verwenden, um dies zu tun:

document.querySelectorAll('ul.nav a.nav-link').forEach(link => {
    link.onclick = () => window.history.pushState(null, null, link.attributes.href.value);
});

Dies behebt auch eine extrem undurchsichtige Registerkarte, die bei Verwendung von jquery und bootstrap nicht ausgelöst wird

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 

<script type="text/javascript">
$('.nav-tabs a').click(function (e) {
    // No e.preventDefault() here.
    $(this).tab('show');
});
</script>

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>