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.

If I understand you right, yes it is possible. I would use sockets. — Luka Krajnc, May 26 '15 at 13:41
Do you mean you want to show a particular tab based on what was clicked to get to the page? — Ted, May 26 '15 at 13:45
You could with an ng-class expression. Please provide code from your controller and a route example to help you. — Vassilis Pits, May 26 '15 at 13:46
possible duplicate of [Activate the tab of the location hash](http://stackoverflow.com/questions/24786125/activate-the-tab-of-the-location-hash) — KyleMit, May 26 '15 at 13:50
possible duplicate of [Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink](http://stackoverflow.com/questions/7862233/twitter-bootstrap-tabs-go-to-specific-tab-on-page-reload-or-hyperlink) — redbmk, May 26 '15 at 13:56

score 2 · Answer 1 · answered May 26 '15 at 13:47

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.

score 0 · Answer 2 · edited May 23 '17 at 12:06

@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;
    });

});

Open Bootstrap tab form external page

2 Answers2

Here's a demo in Plunker