Open Bootstrap tab form external page

Question

I have Bootstrap tab in page. It is working fine. I want to open this tabs from external page. is it possible.

 <div role="tabpanel"> 


          <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#permisions"  class="active" aria-controls="permisions" role="tab" data-toggle="tab">Tab1</a></li>
            <li role="presentation"><a href="#roles" aria-controls="roles" role="tab" data-toggle="tab">Tab 2</a></li>
            <li role="presentation"><a href="#users" aria-controls="users" role="tab" data-toggle="tab">Tab 3</a></li>
          </ul>

          <!-- Tab panes -->
          <div class="tab-content">
            <div role="tabpanel" class="tab-pane active"id="permisions" >
              <div id="exRowTable_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
                <div class="tableContainer">
                  <section class="techtable">
                    <div class="table-responsive">
                     Content 1
                    </div>
                  </section>
                </div>
              </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="roles">
              <div id="exRowTable_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
                <div class="tableContainer">
                  <section class="techtable">
                    <div class="table-responsive">
                     Content 2
                    </div>
                   </section>
                </div>
              </div>
            </div>
            <div role="tabpanel" class="tab-pane"id="users">
              <div id="exRowTable_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
                <div class="tableContainer">
                  <section class="techtable">
                    <div class="table-responsive">
                    Content 3
                    </div> 
                  </section>
                </div>
              </div>
            </div>
          </div>
        </div>

My Requirement is: call tabs from different page. Suggest me other tab library if it is not possible with bootstrap.

Answer 1

First, you will have to do something like this from the external page:

<a href="yourpage.html#users">Click here to see all users</a>

On the "yourpage.html" where the tabs are located, you want to have this Javascript code run:

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

I hope this helps.

Answer 2

@Yosep is 100% right. I'd also add that if you'd like to persist the state on each tab show, you can add the hash to the url. This is important because users will likely want to take the current URL and share the current screen without having to guess what the ID would be. To do this, you can tap into the shown.bs.tab event add update the location.hash .

Here's an example from this question on Bootstrap toggleable tabs without having tab links :

$(function() {

    // jump to tab if it exists 
    if (location.hash) {
        $('a[href=' + location.hash + ']').tab('show');
    }

    // add tab hash to url to persist state
    $(document.body).on("shown.bs.tab", function(e){
      location.hash = e.target.hash;
    });

});

Here's a demo in Plunker