单击链接时如何定位引导选项卡?

时间:2015-07-20 07:43:15

标签: javascript jquery twitter-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的标签。

有可能吗?我在这里找到了类似的问题,但没有一个对我这个场景没有帮助。

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

1 个答案:

答案 0 :(得分:0)

您可以通过调用以下方法激活标签:

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

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