Question

我想在点击按钮后激活标签。当我点击按钮时，选项卡窗格＆＃34; bbb＆＃34;应该是激活的。

<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 active" id="aaa">
          <div>
             <button type="submit" class="btn btn-primary" aria-label="Left Align" onclick="activateTab('bbb')" name="activateUser">
                                    Change active tab
              </button>
          </div>
    </div>
    <div class="tab-pane" id="bbb">...Content...</div>
    <div class="tab-pane" id="ccc">...Content...</div>
</div>

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

这是一个不起作用的例子。

http://jsfiddle.net/z76sy86z/

Answer 1

函数activateTab（）是onload函数，作为jsfiddle的默认选项。它不在全球范围内。

您可以将“加载类型”设置为“不从选项中换行”或“更容易”：

{{1}}

Answer 2

不要将函数从html集合成html，如下所示

<script type="text/javascript">
function activateTab(tab){
    $('.nav-tabs a[href="#' + tab + '"]').tab('show');
};</script>
<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 active" id="aaa">
                                <div>
                                    <button type="submit" class="btn btn-primary" aria-label="Left Align" onclick="activateTab('bbb')" name="activateUser">
                                        Change active tab
                                    </button>
                                </div>
                           </div>
    <div class="tab-pane" id="bbb">...Content...</div>
    <div class="tab-pane" id="ccc">...Content...</div>
</div>

单击按钮后激活选项卡

2 个答案: