Twitter Bootstrap - Tabs - URL doesn't change

前端 未结 15 1605
长情又很酷
长情又很酷 2020-11-28 18:53

I\'m using Twitter Bootstrap and its \"tabs\".

I have the following code:

15条回答
  •  天涯浪人
    2020-11-28 19:12

    Same problem with CakePHP with Bootstrap 3 Tabs, plus when i send with external URL and anchor, it jumps to the section losing my menu, after review many solutions made this...

    thanks to: 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
    

提交回复
热议问题