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

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

В кофескрипте:

$(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)

Или в JavaScript:

$(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);
    });
});

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

Кредит идет 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);
       }
    });
});

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

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

$('#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');
}

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

Кредит принадлежит 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');
};

Протестировано для Bootstrap 4, минималистский (две строки) код без отправки истории, который работает на любой странице с навигационными вкладками.

<script type="text/javascript">
    $(document).ready(function(){

        // Store the currently selected tab in the hash value
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { location.replace($(e.target).attr("href")); });

        // Switch to the currently selected tab when loading the page
        $('.nav-tabs a[href="' + window.location.hash + '"]').tab('show');
    });
</script>

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

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

Еще одна модифицированная версия, если вы не хотите, чтобы в историю добавлялись нажатия вкладок, но также не хотите, чтобы страница прыгала вверх и вниз:

$(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);
    }
  });

});

Выполните следующий код после загрузки 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');
}

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