0

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

<ul id="myTab" class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Первая вкладка</a></li>
  <li><a href="#profile" data-toggle="tab">Вторая вкладка</a></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>

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

5
  • мне кажется, в бутстрапе нет такой фичи. хотя на SO говорят убрять class="active" вообще.
    – zb'
    Commented 11 нояб. 2013 в 10:22
  • если бы была, то она бы уже по логике работа, по дефолту, все дело в какой-то доп. js функции, я думаю что она уже давно избита может кто поделится. Я как чайник могу понечно через php сделать, регулярку на урл, потом сравнение с хэштегами но кода получается не мало, а вот с js не дружу
    – Tokyoby
    Commented 11 нояб. 2013 в 10:27
  • на php вы хэшей не увидите (они на сервер вообще не передаются) :P попробуйте убрать active, ну или вызывать show tab в $(function(){}); хэш лежит в document.location.hash
    – zb'
    Commented 11 нояб. 2013 в 10:29
  • у меня есть $_SERVER['REQUEST_URI'], а значит и хэш :) спасибо, погуглю document.location.hash уже что-то
    – Tokyoby
    Commented 11 нояб. 2013 в 10:36
  • ой, ошибочка, в $_SERVER['REQUEST_URI'] то вырезается #...
    – Tokyoby
    Commented 11 нояб. 2013 в 12:25

3 ответа 3

2

Чисто разметкой это не решить. Добавьте скрипт:

$(function() {
    if (window.location.hash.length > 0) {
        $('a[href="' + window.location.hash + '"]').click();
    }
}
1
  • что должно было выйти? что-то непонял
    – Tokyoby
    Commented 11 нояб. 2013 в 12:25
0

С Bootstrap не работала, но на этой странице обнаружила интересную штуку, слева закладки для контента расположены в блоке .bs-docs-sidebar. А непосредственно в body прописано <body data-spy="scroll" data-target=".bs-docs-sidebar">. Думаю, data-target=".bs-docs-sidebar" влияет на вывод содержимого якоря с других страниц, т.к. ссылка такого вида проходит. В вашем случае у списка класс - "nav nav-tabs", может быть стоит прописать <body data-target=".nav-tabs">.

1
  • речь не идет об редактировании кода, с таким успехом я могу прописать в классе второго блока active и он станет по умолчанию активным, мне надо чтобы ссылка site.ru/page.html#profile автоматически открывала второй таб
    – Tokyoby
    Commented 11 нояб. 2013 в 10:09
0

Здравствуйте! Сам пытаюсь решить подобную задачу -

Заголовок1
  • Содержание
  • Содержание
  • Заголовок2
  • Содержание
  • Содержание
  • Чтобы из другой страницы по якорю, например, "#panel3" открывалась нужная панель. Перепробовал многое, но не работает.

       
        <div class="bs-docs-sidebar">
    <ul class="nav nav-tabs">
      
      <li class="active dropdown">
        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
          Заголовок1 
          <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
          <li><a data-toggle="tab" href="#panel1">Содержание</a></li>
          <li><a data-toggle="tab" href="#panel2">Содержание</a></li>
        </ul>
      </li>
    
      <li class="active dropdown">
        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
          Заголовок2
          <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
          <li><a data-toggle="tab" href="#panel3">Содержание</a></li>
          <li><a data-toggle="tab" href="#panel4">Содержание</a></li>
        </ul>
      </li>
    
    </ul>
    </div> 
    
    
    
     

    Ваш ответ

    Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

    Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.