bootstrap customtabs.js Ссылка на содержимое второго таба с другой страницы

Имеется такой таб из bootstrap 2:


Первая вкладка</li>
  Вторая вкладка</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
  <p>Содержание первого таба</p>
</div>
<div class="tab-pane fade" id="profile">
  <p>Содержание второго таба</p>
</div>
</div>

(что-то здешний редактор режет часть html->ul, но смысл? думаю, понятен)

Как реализовать ссылку на содержимое второго таба с другой страницы? Пробовал через якорь site.ru/page.html#profile, но ссылка выводит на содержимое первого таба.

  • Вопрос задан
  • 4983 просмотра
Решения вопроса 1
@Tokyo Автор вопроса

Спасибо товарищу kulakowka за наводку, сделал так:

<script type="text/javascript">
if (window.location.hash) {
	$('#myTab a[href="'+window.location.hash+'"]').tab('show');
}
</script>

(не забыть вставить в ul id="myTab")

Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3

На самом деле, когда вы указываете ссылку вида: site.ru/page.html#profile, то вы попадаете на уровень как раз второго таба, просто согласно классам, он скрыт (а первый таб открыт). Вариантов решения несколько: 1. На уровне JS разбирать якорь (window.location.hash), и давать класс fade in active тому табу, id которого является якорем 2. В ссылке ID второго таба передавать какой-то GET параметр, и класс fade in active присваивать на уровне генерации страницы на backend'стороне (PHP, nodeJS, whatever) нужному табу

Ответ написан
Комментировать
xaja
@xaja

можно втупую

ссылка: /link/#profile

document.ready:
hash = window.location.hash.substring(1); // profile
if (hash.length > 0) {
$('li.'+hash).click();
}

Ответ написан
Комментировать
DeDMazday
@DeDMazday
Ничего не понимаю, исходные данные те же, все вышеперечисленные варианты решений не дают результата, может глянет кто, что я делаю не так? Тестовая страница travelsbase.ru/index.php/otdykh/palatka
На пробу установлен вариант
<script type="text/javascript">
$(document).ready(function () {
    var hash = window.location.hash;
    hash && $('ul.nav-tabs a[href="' + hash + '"]').tab('show');
});
</script>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы