How to call bootstrap tab from asp.net source code

Question

I have the following elements in my asp.net page

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#tabs-1" data-toggle="tab">Phase 1</a></li>
    <li><a href="#tabs-2" data-toggle="tab">Phase 2</a></li>
    <li><a href="#tabs-3" data-toggle="tab">Phase 3</a></li>
    <li><a href="#tabs-4" data-toggle="tab">Summary</a></li> 
</ul>

<div class="tab-content">

    <div class="tab-pane active" id="tabs-1">
        Tab 1 Content

        <asp:Button ID="Button2" runat="server" Text="next" />
    </div>
    <div id="tabs-2" class="tab-pane">
        Tab 2 Content

        <asp:Button ID="Button2" runat="server" Text="next" />
    </div>
    <div id="tabs-3" class="tab-pane">
        Tab 3 Content
        <asp:Button ID="Button2" runat="server" Text="next" />
    </div>
    <div id="tabs-4" class="tab-pane">
        Tab 4 Content
        <asp:Button ID="Button2" runat="server" Text="Save" />
    </div>

</div>

I want display the content of each tab based on the button click() from the source code using JavaScript provided by the site:

1 - Enable tabbable tabs via JavaScript (each tab needs to be activated individually):

$('#myTab a').click(function (e) {
    e.preventDefault()
    $(this).tab('show')
})

2- You can activate individual tabs in several ways:

$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab a:first').tab('show') // Select first tab
$('#myTab a:last').tab('show') // Select last tab
$('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)

Ref : http://getbootstrap.com/javascript/

The problem is that I am not so good in JavaScript,now learning it. I need a small help about performing the task

Answer 1

You need to associate those events with your button. Try the button's OnClientClick property. This will let you associate a javascript function with your button. Examples can be found at http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.button.onclientclick(v=vs.110).aspx

Alternatively, you could do something like

$(".tab-pane input").click(function(){
  $('[href="#'+$(this).closest(".tab-pane").attr('id')+'"]').tab("show");
})

which will should call the tab function on each of the tabs containing a button when they are clicked.

That said, you may have a fundamental issue with this - wont the buttons to navigate to the tabs be hidden inside the tabs themselves?