Перейти к определенной вкладке с другой вкладки с помощью загрузочных вкладок Bootstrap

Я использую Bootstrap nav-tabs со следующей настройкой:

<ul class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
</ul>
<div id="tabContent" class="tab-content">
  <div class="tab-pane active in" id="home">
    <form id="tab">
        <label>Name:</label>
        <input type="text" value="fooBar" class="input-xlarge">
    </form>
  </div>
  <div class="tab-pane fade" id="profile">
    <form id="tab2">
        <a href="#home">Home</a>
    </form>
  </div>
</div>

Как вы можете видеть, у меня есть ссылка на вкладке profile, которая ссылается на первую вкладку. При нажатии на якорь изменяется URL-адрес в строке URL-адреса, однако он не переходит на конкретную вкладку.

Затем я заметил, что, как правило, невозможно напрямую ссылаться на вкладку, поэтому я добавил следующий код из Twitter Bootstrap Tabs: перейдите на специальную вкладку на странице Reload или Hyperlink:

// 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', function (e) {
    window.location.hash = e.target.hash;
})

Теперь я могу ссылаться на конкретную вкладку из другого места, но нет, если я на той же странице, где находится nav-bar. Перезагрузка страницы затем переместилась бы на нужную вкладку, поэтому я подумал, что могу просто принудительно перезагрузить страницу с помощью решения Javascript: как по-настоящему перезагрузить сайт тегом привязки?:

window.location.reload(true);

Это, однако, закончилось перезагрузкой каждый раз, когда я нажимал на вкладку, кроме того, она все еще не загружала вкладку home при нажатии на якорь.

Таким образом, как бы перейти к заданной id с другой вкладки?

Ответ 1

Возможно, вы столкнулись с неправильной нотой с другими ответами, которые вы упомянули... довольно просто изменить вкладки с одной и той же страницы (независимо от того, находитесь ли вы на другой вкладке или нет): вы можете использовать базовый бутстрап вкладка Javascript для этого.

Сначала немного измените свой html: добавьте идентификатор к вашему <ul class="nav nav-tabs" id="myTab">.., затем добавьте ссылку на вторую вкладку:

<div class="tab-pane fade" id="profile">
  <form id="tab2">
    <a href="#" id="gotohome">Jump to home tab (this works)</a>
...

и добавьте в свой документ следующее:

$('#gotohome').click(function() {
  $('#myTab a[href="#home"]').tab('show');
});

Рабочий пример в jsFiddle.

Ответ 2

Данный ответ

$('#myTab a[href="#home"]').tab('show');

также может использоваться для перехода на конкретную вкладку программного обеспечения JavaScript. Предположим, что вы хотите перейти к определенной вкладке в начале с помощью URL:

http://myDomain/myApp#tabSomewhere

Вы можете себе представить, что это сработает (вам нужно сделать некоторое дополнительное кодирование). Предположим, что ваша первая страница находится в tabHome (вы делаете ее активной с классом "active". Когда вы пытаетесь вернуться на эту страницу с помощью javascript, вам нужно удалить активный класс из tabHome, используя:

$('li').removeClass('active');