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");
})

将在单击按钮时调用每个选项卡上的选项卡功能。

那就是说，你可能有一个根本问题 - 导航到标签的按钮是否隐藏在标签本身内？

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

1 个答案: