How to switch one tab to another on button click if using bootstrap?

Question

I have a page where i have 4 tabs. I want to move first tabs if user click on button. Same button is showing on all tabs. If user is on first tab, then user remains on first tab after clicking on button and if user is on any other tab except first tab then user should move to first tab on clicking button.I am using bootstrap.Here is my code:

  <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>

How i can switch to tab "home" on clicking button. I have tried this but it's not working.

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

This is not working. How i can do this?

Answer 1

This should work for you, haven't tested it.

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