javascript - 打开 Bootstrap 选项卡表单外部页面

Question

我在页面中有 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>

我的要求是:从不同的页面调用标签。如果无法使用 Bootstrap ，请向我推荐其他选项卡库。

Answer 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');
} 

希望对您有所帮助。