[ How to target bootstrap tab when click on a link? ]

I have a link in my home page to go to edit profile page. In editing page I have used bootstrap tabs like below,

<ul class="nav custom-nav">
  <li role="presentation" >
    <a href="#restaurant-basic-info" aria-controls="restaurant-basic-info" role="tab" data-toggle="tab">Restaurant Info</a>
  </li>
  <li role="presentation">
    <a href="#edit-cuisine" aria-controls="edit-cuisine" role="tab" data-toggle="tab">Cuisine</a>
  </li></ul>
</ul>

Tab Contents:

<div class="tab-content">
  <!-- Tab pane-1 -->
  <div role="tabpanel" class="tab-pane" id="restaurant-basic-info">
    <form>
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
      </div>
      <div class="crearfix"></div>

      <div class="form-footer">
        <div class="action ">
          <input type="submit" class="btn btn-primary" value="Update">
          <input type="hidden" name="submitted" value="TRUE">
        </div>
      </div>
      <br>
    </form>  
  </div>

  ......

</div>

So. Now I want to open the tab with the ID of restaurant-basic-info, when click on the link from home page.

Is it possible to do? I found similar question here but none of them not help me to this scenario.

Hope Somebody may help me out. Thank you.

Answer 1

You can activate the tab by calling this:

$('ul.custom-nav a[href="#restaurant-basic-info"]').tab('show');

This can be executed on page load. Please check the jsfiddle