BootTabbable. Activate tab by internal URL and change it on show

Issue #139 wontfix
created an issue

Just change {{{


$cs->registerScript(CLASS.'#'.$id, "jQuery('#{$id}').tab('show');"); }}} Into: {{{


$cs->registerScript(CLASS.'#'.$id, 'if(window.location.hash != "") jQuery(\'#'.$id.' a[href="\'+window.location.hash+\'"]\').tab(\'show\'); $(\'#'.$id.' a[data-toggle="tab"]\').on(\'shown\', function (e){ parent.location.hash =\'#\')+1); })'); }}}

Comments (4)

  1. Sw3rtas reporter

    whoops, parent.location.hash should be window.location.hash So:

    $cs->registerScript(__CLASS__.'#'.$id, 'if(window.location.hash) jQuery(\'#'.$id.' a[href="\'+window.location.hash+\'"]\').tab(\'show\');
    jQuery(\'#'.$id.' a[data-toggle="tab"]\').on(\'shown\', function (e){window.location.hash =\'#\')+1); })');
  2. horizons

    Just today i wanted the same thing, but i did this like with the jquery ui tabs with the bbq support. I just add this to my e.g. laymout main.php

    this code is almost the same as the code for jquery ui tabs. only the selectors and how the right tab is activated when the url hash is changed was adapted. this solution also prevents the "jumping" to the id's of the tabs which your code above has. So this won't jump to the location of the tab.

    $script =<<<EOP
    // The "tab widgets" to handle.
    var tabs = $('.nav-tabs'),
    // This selector will be reused when selecting actual tab widget A elements.
    tab_a_selector = 'a[data-toggle="tab"]';
    // Enable tabs on all tab widgets. The `event` property must be overridden so
    // that the tabs aren't changed on click, and any custom event name can be
    // specified. Note that if you define a callback for the 'select' event, it
    // will be executed for the selected tab whenever the hash changes.
    tabs.tabs({ event: 'change' });
    // Define our own click handler for the tabs, overriding the default.
    tabs.find( tab_a_selector ).click(function(){
    var state = {},
    // Get the id of this tab widget.
    id = $(this).closest( '.nav-tabs' ).attr( 'id' ),
    // Get the index of this tab.
    idx = $(this).parent().prevAll().length;
    // Set the state!
    state[ id ] = idx;
    $.bbq.pushState( state );
    // Bind an event to window.onhashchange that, when the history state changes,
    // iterates over all tab widgets, changing the current tab as necessary.
    $(window).bind( 'hashchange', function(e) {
    // Iterate over all tab widgets.
    // Get the index for this tab widget from the hash, based on the
    // appropriate id property. In jQuery 1.4, you should use e.getState()
    // instead of $.bbq.getState(). The second, 'true' argument coerces the
    // string value to a number.
    var idx = $.bbq.getState(, true ) || 0;
    // Select the appropriate tab for this tab widget by triggering the custom
    // event specified in the .tabs() init above (you could keep track of what
    // tab each widget is on using .data, and only select a tab if it has
    // changed).
    $('#'' li:eq('+idx+') a').tab('show');
    // Since the event is only triggered when the hash changes, we need to trigger
    // the event now, to handle the hash the page may have loaded with.
    $(window).trigger( 'hashchange' );
  3. Sw3rtas reporter

    Here is solution without bbq for prevent jumping.

    $script ='if(window.location.hash) jQuery(\'#'.$id.' a[href="\'+window.location.hash+\'"]\').tab(\'show\');
    jQuery(\'#'.$id.' a[data-toggle="tab"]\').on(\'shown\', function (e){
        if(history.pushState) {
            history.pushState(null, null,\'#\')));
        }else {
            var x = window.pageXOffset, y = window.pageYOffset;
            window.location.hash =\'#\')+1);
    $cs->registerScript(__CLASS__.'#'.$id, $script);
  4. Log in to comment