打开 Bootstrap 选项卡表单外部页面答案

【问题标题】：Open Bootstrap tab form external page打开 Bootstrap 选项卡表单外部页面
【发布时间】：2015-05-26 13:35:16
【问题描述】：

我在页面中有 Bootstrap 选项卡。它工作正常。我想从外部页面打开这个标签。有没有可能。

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

我的要求是：从不同的页面调用标签。 如果引导程序无法使用，建议我使用其他选项卡库。

【问题讨论】：

如果我理解正确，是的，这是可能的。我会使用套接字。
您的意思是要根据点击进入页面的内容显示特定标签？
分享一些如何实现...
您可以使用 ng-class 表达式。请提供来自您的控制器的代码和一个路由示例来帮助您。
是的，泰德，我正是希望你在说

标签： javascript jquery angularjs html twitter-bootstrap

【解决方案1】：

首先，您必须从外部页面执行以下操作：

<a href="yourpage.html#users">Click here to see all users</a>

在选项卡所在的“yourpage.html”上，您希望运行这段 Javascript 代码：

var hash = document.location.hash;
if (hash) {
    $('.nav-tabs a[href="#' + hash + '"]').tab('show');
}

我希望这会有所帮助。

【讨论】：

【解决方案2】：

@Yosep 是 100% 正确的。我还要补充一点，如果您想在每个选项卡显示上保留状态，您可以将哈希添加到 url。这很重要，因为用户可能希望获取当前 URL 并共享当前屏幕，而不必猜测 ID 是什么。为此，您可以点击shown.bs.tab 事件添加更新location.hash。

这是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;
    });

});

Here's a demo in Plunker

【讨论】：