javascript - 单击链接时如何定位 Bootstrap 选项卡？

Question

我的主页中有一个链接可以转到编辑个人资料页面。在编辑页面中，我使用了如下所示的 Bootstrap 选项卡，

<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>

选项卡内容:

<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>

所以。现在，当单击主页上的链接时，我想打开 ID 为 restaurant-basic-info 的选项卡。

可以吗？我在这里发现了类似的问题，但没有一个不能帮助我解决这种情况。

希望有人可以帮助我。谢谢。

Answer 1

您可以通过调用以下命令来激活该选项卡:

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

这可以在页面加载时执行。请查看jsfiddle