Не удается получить доступ к вкладке, используя идентификатор в URL-адресе за пределами страницы.

Question

В этом случае у меня есть две страницы в моем локальном хосте, дома и проектах.

Главная - LOCALHOST, Проекты страница - LOCALHOST/проекты/

страница проектов Nav-элементный от начальной загрузки 3:

<ul class="nav nav-tabs" data-tabs="tabs"> 
    <li class="active"><a data-toggle="tab" href="#red">Red</a></li> 
    <li><a data-toggle="tab" href="#orange">Orange</a></li> 
    <li><a data-toggle="tab" href="#yellow">Yellow</a></li> 
    <li><a data-toggle="tab" href="#green">Green</a></li> 
    <li><a data-toggle="tab" href="#blue">Blue</a></li> 
</ul> 
<div class="tab-content"> 
    <div class="tab-pane active" id="red"> 
     <h1>Red</h1> 
     <p>red red red red red red</p> 
    </div> 
    <div class="tab-pane" id="orange"> 
     <h1>Orange</h1> 
     <p>orange orange orange orange orange</p> 
    </div> 
    <div class="tab-pane" id="yellow"> 
     <h1>Yellow</h1> 
     <p>yellow yellow yellow yellow yellow</p> 
    </div> 
    <div class="tab-pane" id="green"> 
     <h1>Green</h1> 
     <p>green green green green green</p> 
    </div> 
    <div class="tab-pane" id="blue"> 
     <h1>Blue</h1> 
     <p>blue blue blue blue blue</p> 
    </div> 
</div> 

Он работает нормально, когда я перемещаться по вкладкам внутри страницы проектов , и если я нахожусь на вкладке «Оранжевый», я вижу ссылку - localhost/projects/# orange.

Так что проблема заключается в том, что я хочу получить доступ к странице проектов и оранжевой вкладке с домашней страницы, но с помощью этой ссылки будут открыты только локальные хосты/проекты/и первая вкладка, в данном случае красная.

Так что мой вопрос: как сделать «навигационную вкладку» доступной извне страницы.

Заранее спасибо.

Answer 1

Когда вы загружаете страницу своих проектов, вам нужно сделать 2 вещи: во-первых, прочитать URL-адрес и получить вкладку, которую пользователь хочет открыть. Во-вторых, покажите, что вкладка открыта (и закрывает остальные).

Вы можете сделать первую часть, читая URL в JavaScript с document.location.hash

И второй, открыв вкладку, которую вы хотите, это делается путем вызова вкладке Метод Bootstrap («шоу») , Он закрывает любой другой. См. Пояснения at Bootstrap documentation

@ ZimSystem ответила на предыдущий вопрос очень четко: https://stackoverflow.com/a/31003280/1414176.

скопировать здесь свой код:

var hash = document.location.hash; 
if (hash) { 
    $('.nav-tabs a[href='+hash+']').tab('show'); 
} 

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

@ второй части ZimSystem является для очистки URL после открытия вкладки событие.

Редактировать: У вас есть лучший код in this other SO answer. Он также решает проблему scrollTo.

// 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.bs.tab', function (e) { 
    window.location.hash = e.target.hash.replace("#", "#" + prefix); 
});