There is such a tab from 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>

How to implement a link to the content of the second tab from another page? I tried through anchor site.ru/page.html#profile , but the link displays the contents of the first tab.

  • It seems to me that there is no such feature in the bootstrap. although SO is said to remove class = "active" in general. - zb '11
  • if there was, then it would have been logically the work, by default, the whole thing in some kind of extra. js functions, I think that she has long been beaten by someone who can share. As a teapot, I can make a regular update via php, then a comparison with hashtags, but the code is not small, but I’m not friends with js - Tokyoby
  • on php, you will not see the hashes (they are not transmitted to the server at all): P try to remove active, or call show tab in $(function(){}); the hash is in document.location.hash - zb '11
  • I have $ _SERVER ['REQUEST_URI'], which means hash :) thanks, I'll google document.location.hash something already - Tokyoby
  • Oh, wrong, in $ _SERVER ['REQUEST_URI'] then cut # ... - Tokyoby

3 answers 3

Pure markup does not solve this. Add script:

 $(function() { if (window.location.hash.length > 0) { $('a[href="' + window.location.hash + '"]').click(); } }
  • what should have come out? I don't understand something - Tokyoby

I didn’t work with Bootstrap, but I found an interesting thing on this page . To the left, the content tabs are located in the .bs-docs-sidebar . And directly in the body is written <body data-spy="scroll" data-target=".bs-docs-sidebar"> . I think data-target=".bs-docs-sidebar" affects the output content of the anchor from other pages, because link of this type passes. In your case, the list class is "nav nav-tabs" , it may be worth setting <body data-target=".nav-tabs"> .

  • I’m not talking about editing the code, so I can write in the class of the second block active so it will become active by default, I need the site.ru/page.html#profile link to automatically open the second tab - Tokyoby

Hello! I myself am trying to solve a similar problem -

Title1
  • Content
  • Content Title2
  • Content
  • Content

    So that from the other page by anchor, for example, "# panel3", the required panel opens. I tried a lot, but it does not work.

     <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>