Лучший способ сделать вкладки бутстрапа twitter постоянными

Question

Каков наилучший способ сделать эти вкладки упорными?

http://twitter.github.com/bootstrap/javascript.html#tabs

Чтобы добавить некоторый контекст, это для применения рельсов. Я передаю массив [tab1, tab2] в мое представление, отображая обе вкладки и используя плагин tabstrap для переключения их видимости.

Answer 1

Этот код выбирает вкладку вправо в зависимости от # хэш и добавляет право #hash при нажатии на вкладку. (Это использует JQuery)

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

или в 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); 
    }); 
}); 

Answer 2

Вы можете получить фрагмент URL (это часть URL после #) на нагрузке с использованием window.location.hash, и, в частности установлено, что язычок, как видимый:

if (window.location.hash) { 
    $(window.location.hash).tab('show') 
} 

Answer 3

Вот еще один способ решить проблему.

Сначала добавьте строку в событие щелчка, чтобы показать хэш в адресной строке

$('#myTab').on('click', 'a', function (e) { 
    e.preventDefault(); 
    // add this line 
    window.location.hash = $(this).attr('href'); 
    $(this).tab('show'); 
}) 

Затем убедитесь, что язычок прямо активируется onload, добавив эту часть в документе готового вызов.

if(window.location.hash){ 
    $('#myTab').find('a[href="'+window.location.hash+'"]').tab('show'); 
} 

Все вместе вы можете написать это:

// cache the id 
var navbox = $('#myTab'); 
// activate tab on click 
navbox.on('click', 'a', function (e) { 
    var $this = $(this); 
    // prevent the Default behavior 
    e.preventDefault(); 
    // set the hash to the address bar 
    window.location.hash = $this.attr('href'); 
    // activate the clicked tab 
    $this.tab('show'); 
}) 

// if we have a hash in the address bar 
if(window.location.hash){ 
    // show right tab on load (read hash from address bar) 
    navbox.find('a[href="'+window.location.hash+'"]').tab('show'); 
} 

Answer 4

Я хотел улучшить лучший ответ здесь ..

Заслуга Sucrenoir, но если вы хотите, чтобы избежать прыгнув на странице при изменении вкладок используйте этот улучшенный код:

$(document).ready(function() { 
    // show active tab on reload 
    if (location.hash !== '') $('a[href="' + location.hash + '"]').tab('show'); 

    // remember the hash in the URL without jumping 
    $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) { 
     if(history.pushState) { 
      history.pushState(null, null, '#'+$(e.target).attr('href').substr(1)); 
     } else { 
      location.hash = '#'+$(e.target).attr('href').substr(1); 
     } 
    }); 
}); 

Answer 5

Другая модифицированная версия, если вы не хотите Вкладка щелкает быть добавлена ​​к истории, но и не хочет, чтобы страница прыгает вверх и вниз:

$(document).ready(function() { 

    if (location.hash !== '') { 
    $('a[href="' + location.hash + '"]').tab('show'); 
    } 

    $("a[data-toggle='tab']").on("shown.bs.tab", function (e) { 
    var hash = $(e.target).attr("href"); 
    if (hash.substr(0,1) == "#") { 
     var position = $(window).scrollTop(); 
     location.replace("#" + hash.substr(1)); 
     $(window).scrollTop(position); 
    } 
    }); 

}); 

Answer 6

Выполните следующий код после загрузки DOM:

$('a[data-toggle=tab]').on('click', function() { 
    history.pushState(null, null, $(this).attr('href')); 
}); 


if (window.location.hash) { 
    $('a[data-toggle=tab][href="' + window.location.hash + '"]').tab('show'); 
} 

Однако, это приводит к плохому опыт UI, так как в настоящее время активной вкладки будет показан первым, а затем она будет переключена на вкладку с location.hash

Answer 7

Я хотел улучшить лучшие два ответа здесь .. :)

Кредит идет на Sucrenoir и d-wade.

Поскольку в коде используется API истории, вы не можете использовать onchangehash (https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onhashchange). Этот код добавляет функциональность кнопки «Назад» (https://developer.mozilla.org/cs/docs/Web/API/WindowEventHandlers/onpopstate).

// show active tab on reload 
if (location.hash !== '') $('a[href="' + location.hash + '"]').tab('show'); 
// remember the hash in the URL without jumping 
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) { 
    if(history.pushState) { 
     history.pushState(null, null, '#'+$(e.target).attr('href').substr(1)); 
    } else { 
     location.hash = '#'+$(e.target).attr('href').substr(1); 
    } 
}); 
// remember to back button 
window.onpopstate = function(e) { 
    $('a[href="' + location.hash + '"]').tab('show'); 
};