CODEWITHSUNDEEP
javascriptjquerytwitter-bootstraptabs
avinodra
avinodra

Reputation: 102

How to make tabs Linkable in Bootstrap

I'm using Bootstrap in my rails application and i want to make tabs linkable with this form http://example.com/?tab=tab-one and http://example.com/?tab=tab-two so I'm wondering how can I achieve this

My tabs is something like this

  <div class="optionset-menu bxsbdbdr">
    <ul class="nav nav-tabs setcustom-tab" role="tablist">
      <a href="#summary" aria-controls="summary" role="tab" data-toggle="tab"><li role="presentation" class="active hav-bordbot">Basic Infos</li></a>
      <a href="#languages-time" aria-controls="anguages-time" role="tab" data-toggle="tab"><li role="presentation" class="hav-bordbot">Language & Time zone</li></a>
      <a href="#basic" aria-controls="basic" role="tab" data-toggle="tab"><li role="presentation" class="havnt-bordbot">Change password</li></a>
    </ul>
  </div>

Upvotes: 3

Views: 224

Answers (1)

KyleMit
KyleMit

Reputation: 29889

You can see my answer to Activate the tab of the location hash for more info.

If you want to navigate to the selected URL when the page loads, you'll need to add javascript on page load to gather the necessary information from the URL and then use that to open the appropriate panel.

Here's an example using the hash value of the tab:

$(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;
    });

});

If the tab had an ID of tab-two, you could open it with the url http://example.com/#tab-two

Here's a demo in Plunker

Open the window or run it directly here

Upvotes: 3

Related Questions