Вкладки Twitter Bootstrap: перейти к конкретной вкладке на странице «Перезагрузка» или «Гиперссылка»

Question

Я разрабатываю веб-страницу, на которой я использую Twitter Bootstrap Framework и их Bootstrap Tabs JS .Он отлично работает, за исключением нескольких мелких проблем, одна из которых заключается в том, что я не знаю, как перейти непосредственно к конкретной вкладке из внешней ссылки.Например:

<a href="facility.php#home">Home</a>
<a href="facility.php#notes">Notes</a>

должен переходить на вкладку "Главная" и на вкладку "Примечания" соответственно при переходе по ссылкам с внешней страницы

Answer 1

У меня только что была эта проблема, но мне нужно было обработать несколько уровней табуляции.Код довольно уродливый (см. Комментарии), но делает свою работу: https://gist.github.com/JensRantil/4721860 Надеюсь, кто-то найдет его полезным (и не стесняйтесь предлагать лучшие решения!).

Answer 2

Я знаю, что этот поток очень старый, но я оставлю здесь свою собственную реализацию:

$(function () {
  // some initialization code

  addTabBehavior()
})

// Initialize events and change tab on first page load.
function addTabBehavior() {
  $('.nav-tabs a').on('show.bs.tab', e => {
    window.location.hash = e.target.hash.replace('nav-', '')
  })

  $(window).on('popstate', e => {
    changeTab()
  })

  changeTab()
}

// Change the current tab and URL hash; if don't have any hash
// in URL, so activate the first tab and update the URL hash.
function changeTab() {
  const hash = getUrlHash()

  if (hash) {
    $(`.nav-tabs a[href="#nav-${hash}"]`).tab('show')
  } else {
    $('.nav-tabs a').first().tab('show')
  }
}

// Get the hash from URL. Ex: www.example.com/#tab1
function getUrlHash() {
  return window.location.hash.slice(1)
}

Обратите внимание, что я использую префикс класса nav- для ссылок навигации.

Answer 3

Если это кому-нибудь важно, следующий код небольшой и работает безупречно, чтобы получить единственное хеш-значение из URL-адреса и показать, что:

<script>
    window.onload = function () {
        let url = document.location.toString();
        let splitHash = url.split("#");
        document.getElementById(splitHash[1]).click();
    };
</script>

то, что он делает, это получает идентификатор и запускаетсобытие клика.Простой.

Answer 4

Я делаю что-то вроде этого для ссылок с ajax #!# (например, / test.com #! # Test3), но вы можете изменить его как хотите

$(document).ready(function() {

       let hash = document.location.hash;
       let prefix = "!#";

       //change hash url on page reload
       if (hash) {
         $('.nav-tabs a[href=\"'+hash.replace(prefix,"")+'\"]').tab('show');
       } 

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

Пример с простой страницей на Github здесь