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

首先，你必须从外部页面做这样的事情：

    apply plugin: 'com.android.application'

    android {
        compileSdkVersion 21
        buildToolsVersion '22.0.1'

        defaultConfig {
            applicationId "com.sth.sth"
            minSdkVersion 15
            targetSdkVersion 22
            versionCode 1
            versionName "1.0"
        }
        buildTypes {
            release {
                minifyEnabled false
                proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
            }
        }
    }
dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    compile 'com.android.support:appcompat-v7:22.1.1'
    compile 'com.android.support:cardview-v7:21.0.3'
    ...
}

在＆＃34; yourpage.html＆＃34;选项卡所在的位置，您希望运行此Javascript代码：

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

我希望这会有所帮助。

Answer 2

@Yosep 100％正确。我还要补充一点，如果您想在每个标签页上保持状态，可以将哈希添加到网址中。这很重要，因为用户可能希望获取当前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;
    });

});

从外部页面打开Bootstrap选项卡

2 个答案:

Here's a demo in Plunker