如果使用bootstrap,如何在按钮单击时将一个选项卡切换到另一个选项卡?

时间:2015-11-18 12:52:44

标签: javascript jquery twitter-bootstrap tabs

我有一个页面,我有4个标签。如果用户点击按钮,我想移动第一个标签。所有选项卡上都显示相同的按钮。如果用户位于第一个选项卡上,则用户在单击按钮后仍保留在第一个选项卡上,如果用户位于除第一个选项卡之外的任何其他选项卡上,则用户应该在单击按钮时移动到第一个选项卡。我正在使用bootstrap.Here是我的代码:< / p>

  <div class="tabsControlStyling">
        <ul class="nav nav-tabs">
                        <li class="active"><a data-toggle="tab" href="#home"> Home</a></li>
                        <li><a data-toggle="tab" href="#menu1">Menu1</a></li>
                        <li><a data-toggle="tab" href="#menu2">Menu2</a></li>
                        <li><a data-toggle="tab" href="#menu3"> Menu3</a></li>
                        @*<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>*@
                    </ul>

          <div class="tab-content">
                <div id="home" class="tab-pane fade in active">
                //Content
                </div>
                <div id="menu1">
                </div>
                <div id="menu2">
                </div>
                <div id="menu3">
                </div>
          </div>
</div>

如何点击按钮切换到“主页”标签。我试过了,但它没有用。

$('#button').submit(function () {
                debugger;
                $("#home").tab('show');
});

这不起作用。我怎么能这样做?

1 个答案:

答案 0 :(得分:1)

这应该适合你,没有经过测试。

$('#button').submit(function () {
    $("#tabsControlStyling").tabs({
        active: $("#home")
    });
});