Question

我有以下代码

<ul class="nav nav-tabs">
    <li><a href="#aaa" data-toggle="tab">AAA</a></li>
    <li><a href="#bbb" data-toggle="tab">BBB</a></li>
    <li><a href="#ccc" data-toggle="tab">CCC</a></li>
</ul>
<div class="tab-content" id="tabs">
    <div class="tab-pane" id="aaa">...Content...</div>
    <div class="tab-pane" id="bbb">...Content...</div>
    <div class="tab-pane" id="ccc">...Content...</div>
</div>

以下脚本

$(document).ready(function(){
    activaTab('aaa');
});

function activaTab(tab){
    $('.tab-pane a[href="#' + tab + '"]').tab('show');
};

在这种情况下，当页面准备就绪时，第二个选项卡将被激活，但我总是在行$('.tab-pane a[href="#' + tab + '"]').tab();

中出现JavaScript错误

有人可以帮我吗？

Answer 1

应用.nav-tabs中的选择器似乎正在运行：请参阅this demo。

$(document).ready(function(){
    activaTab('aaa');
});

function activaTab(tab){
    $('.nav-tabs a[href="#' + tab + '"]').tab('show');
};

我更喜欢@codedme的答案，因为如果你知道在页面加载之前你想要哪个标签，你应该更改页面html而不是使用JS来完成这个特定的任务。

我也调整了demo的答案。

（如果这不适合您，请指定您的设置 - 浏览器，环境等。）

Answer 2

每当页面准备就绪时，单击指向标签锚点的链接，即

$('a[href="' + window.location.hash + '"]').trigger('click');

或者在vanilla JavaScript中

document.querySelector('a[href="' + window.location.hash + '"]').click();

Answer 3

<div class="tabbable">
<ul class="nav nav-tabs">
    <li class="active"><a href="#aaa" data-toggle="tab">AAA</a></li>
    <li><a href="#bbb" data-toggle="tab">BBB</a></li>
    <li><a href="#ccc" data-toggle="tab">CCC</a></li>
</ul>
<div class="tab-content" id="tabs">
    <div class="tab-pane fade active in" id="aaa">...Content...</div>
    <div class="tab-pane" id="bbb">...Content...</div>
    <div class="tab-pane" id="ccc">...Content...</div>
</div>
</div>

将活动类添加到页面加载后要激活的任何li元素。并且还需要向内容div添加活动类，淡入类对于平滑过渡非常有用。

Answer 4

将id属性添加到html标签

<ul class="nav nav-tabs">
    <li><a href="#aaa" data-toggle="tab" id="tab_aaa">AAA</a></li>
    <li><a href="#bbb" data-toggle="tab" id="tab_bbb">BBB</a></li>
    <li><a href="#ccc" data-toggle="tab" id="tab_ccc">CCC</a></li>
</ul>
<div class="tab-content" id="tabs">
    <div class="tab-pane" id="aaa">...Content...</div>
    <div class="tab-pane" id="bbb">...Content...</div>
    <div class="tab-pane" id="ccc">...Content...</div>
</div>

然后使用JQuery

$("#tab_aaa").tab('show');

Answer 5

为什么不首先选择活动标签然后激活所选标签内容？
1.将类'active'添加到＆lt; li>标签元素首先。
2.然后使用set'active'类来选择div。

class ReadGcsBlobs(beam.DoFn):
    def process(self, element, *args, **kwargs):
        from apache_beam.io.gcp import gcsio
        gcs = gcsio.GcsIO()
        yield (element, gcs.open(element).read())


# usage example:
files = (p
         | "Initialize" >> beam.Create(["gs://your-bucket-name/pickle_file_path.pickle"])
         | "Read blobs" >> beam.ParDo(ReadGcsBlobs())
        )

Answer 6

刚刚为此苦苦挣扎-我会说明情况。

我的标签位于引导程序模式中，并在加载时设置以下内容（在触发模式之前）：

$('#subMenu li:first-child a').tab('show');

虽然选择了选项卡，但实际的窗格不可见。因此，您还需要向窗格中添加active类：

$('#profile').addClass('active');

在我的情况下，窗格具有#profile（但是很容易变成.pane:first-child），然后显示了正确的窗格。

使用JQuery激活Bootstrap选项卡

6 个答案: