Вкладки 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

Вот мое решение проблемы, возможно, немного поздно.Но это может помочь другим:

// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
    $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash;
})

Answer 2

UPDATE

Для Bootstrap 3 измените .on('shown', ...) на .on('shown.bs.tab', ....)

---

Это основано на @ dubbe ответе и ТАК принятом ответе Это решает проблему с window.scrollTo(0,0), которая не работает правильно. Проблема в том, что когда вы заменяете хеш URL на показанной вкладке, браузер прокручивает этот хеш, так как это элемент на странице. Чтобы обойти это, добавьте префикс, чтобы хеш не ссылался на фактический элемент страницы

// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
    $('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('show');
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});

Пример использования

Если у вас есть панель вкладок с id = "mytab", вам нужно разместить ссылку следующим образом:

<a href="yoursite.com/#tab_mytab">Go to Specific Tab </a>

Answer 3

Вы можете вызвать событие click на соответствующей ссылке вкладки:

$(document).ready(function(){

  if(window.location.hash != "") {
      $('a[href="' + window.location.hash + '"]').click()
  }

});

Answer 4

Это улучшенная реализация решения dubbe, которое предотвращает прокрутку.

// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
    $('.nav-tabs a[href="#'+url.split('#')[1]+'"]').tab('show') ;
} 

// With HTML5 history API, we can easily prevent scrolling!
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    if(history.pushState) {
        history.pushState(null, null, e.target.hash); 
    } else {
        window.location.hash = e.target.hash; //Polyfill for old browsers
    }
})

Answer 5

Хотя предоставленное решение JavaScript может работать, я пошел немного другим путем, не требуя дополнительного JavaScript, но требует логики в вашем представлении. Вы создаете ссылку со стандартным параметром URL, например:

<a href = "http://link.to.yourpage?activeTab=home">My Link</a>

Затем вы просто определяете значение activeTab для записи 'class = "active"' в соответствующую <li>

Псевдокод (реализуйте соответственно на вашем языке). Примечание. Я установил вкладку «Домой» в качестве активной по умолчанию, если в этом примере параметры не указаны.

$activetabhome = (params.activeTab is null or params.activeTab == 'home') ? 'class="active"' : '';
$activetabprofile = (params.activeTab == 'profile') ? 'class="active"' : '';

<li $activetabhome><a href="#home">Home</a></li>
<li $activetabprofile><a href="#profile">Profile</a></li>

Answer 6

Для Bootstrap 3:

$('.nav-tabs a[href="#' + tabID + '"]').tab('show');

https://jsfiddle.net/DTcHh/6638/

Answer 7

Я не большой поклонник если ... еще;поэтому я выбрал более простой подход.

$(document).ready(function(event) {
    $('ul.nav.nav-tabs a:first').tab('show'); // Select first tab
    $('ul.nav.nav-tabs a[href="'+ window.location.hash+ '"]').tab('show'); // Select tab by name if provided in location hash
    $('ul.nav.nav-tabs a[data-toggle="tab"]').on('shown', function (event) {    // Update the location hash to current tab
        window.location.hash= event.target.hash;
    })
});

1. Выберите вкладку по умолчанию (обычно первая)
2. Перейти на вкладку (если такой элемент действительно присутствует; пусть jQuery обрабатывает его);Ничего не происходит, если указан неправильный хеш
3. [Необязательно] Обновите хеш, если вручную выбрана другая вкладка

Не обращается к прокрутке до запрошенного хэша;но должен это?

Answer 8

Это работает в Bootstrap 3 и улучшает 2 лучших ответа dubbe и flynfish, интегрируя также ответ GarciaWebDev (который учитывает параметры URL после хеша и является прямым от авторов Bootstrap на трекере проблем github):

// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";

if (hash) {
    hash = hash.replace(prefix,'');
    var hashPieces = hash.split('?');
    activeTab = $('.nav-tabs a[href=' + hashPieces[0] + ']');
    activeTab && activeTab.tab('show');
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});

Answer 9

Этот код выбирает правую вкладку в зависимости от #hash и добавляет правильный #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 10

Опираясь на решение Демиркана Челеби;Я хотел, чтобы вкладка открывалась при изменении URL-адреса и открывалась без перезагрузки страницы с сервера.

<script type="text/javascript">
    $(function() {
        openTabHash(); // for the initial page load
        window.addEventListener("hashchange", openTabHash, false); // for later changes to url
    });


    function openTabHash()
    {
        console.log('openTabHash');
        // Javascript to enable link to tab
        var url = document.location.toString();
        if (url.match('#')) {
            $('.nav-tabs a[href="#'+url.split('#')[1]+'"]').tab('show') ;
        } 

        // With HTML5 history API, we can easily prevent scrolling!
        $('.nav-tabs a').on('shown.bs.tab', function (e) {
            if(history.pushState) {
                history.pushState(null, null, e.target.hash); 
            } else {
                window.location.hash = e.target.hash; //Polyfill for old browsers
            }
        })
    }
</script>