Using bootstrap tabs I needed to make tabs in tabs. Did so

<ul class="nav nav-tabs tabs1"> <li class="active ">ТАБ1</li> <li>ТАБ2</li> <li>ТАБ3</li> </ul> <div class="tab-content"> <div id="panel1" class="tab-pane fade in active"> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#panel1-1">ТАБ1-1</a></li> <li><a data-toggle="tab" href="#panel1-2">ТАБ1-2</a></li> <li><a data-toggle="tab" href="#panel1-3">ТАБ1-3</a></li> </ul> <div class="tab-content"> <div id="panel1-1" class="tab-pane fade in active"> ИНФА </div> <div id="panel1-2" class="tab-pane fade"> ИНФА </div> <div id="panel1-3" class="tab-pane fade"> ИНФА </div> </div> </div> <div id="panel2" class="tab-pane fade"> ИНФА </div> <div id="panel3" class="tab-pane fade"> ИНФА </div> </div>

How can I go to the tab I need by reference? for example, you need to open the tab panel1-1 from another page. I tried http: // url / page # panel1-1 . But does not work.

  • if the page is generated on the server (for example php), then you can pass a getter parameter and process it. Depending on its value, add or not the class active to the taboo - Ivan Frolov
  • here's another way: ru.stackoverflow.com/a/166980/199966 The truth here is that you also need to somehow identify the page, so the same get-parameter to help is Ivan Frolov
  • used this example $ (function () {var hash = window.location.hash; $ ('. nav-tabs a [href = "' + hash + '"]'). tab ('show');}) tabs change, but the page to the open tab does not scroll. More precisely, only the first one is scrolled, and the rest are not. - Skivs

0