javascript - 如何从asp.net源代码调用bootstrap选项卡

Question

我的 asp.net 页面中有以下元素

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

我想使用网站提供的 JavaScript 根据源代码中的按钮 click() 显示每个选项卡的内容:

1 - 通过 JavaScript 启用可选项卡(每个选项卡需要单独激活):

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

2- 您可以通过多种方式激活各个选项卡:

$('#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)

引用号:http://getbootstrap.com/javascript/

问题是我不太擅长 JavaScript，现在正在学习它。我需要关于执行任务的一点帮助

Answer 1

您需要将这些事件与您的按钮相关联。尝试按钮的 OnClientClick 属性。这将让您将 JavaScript 函数与您的按钮关联起来。示例可以在 http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.button.onclientclick(v=vs.110).aspx 找到。

或者，你可以做类似的事情

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

当单击每个包含按钮的选项卡时，它将调用选项卡函数。

也就是说，您可能会遇到一个基本问题 - 导航到选项卡的按钮不会隐藏在选项卡本身内吗？