如何在 asp.net 中使用 bootstrap 创建选项卡控件

Question

这里我在 asp.net 应用程序中实现 bootstrap 选项卡控件。

1) 单击下一步我想转到下一个选项卡。

我想通过单击选项卡控件的选项卡转到下一个选项卡或单击下一步按钮来使选项卡控件工作。

<form id="form1" runat="server">
    <div class="container">
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#personal">Personal Information</a></li>
            <li><a data-toggle="tab" href="#professional">Professional Information</a></li>
            <li><a data-toggle="tab" href="#accountinformation">User Account Infromation</a></li>
        </ul>
        <div class="tab-content">
            <div id="personal" class="tab-pane fade in active">

                <div class="form-group">
                    <div class="row">
                        <div class="col-sm-12 col-md-12 col-lg-12">
                            <div class="col-sm-4">
                                <span class="Star-clr">*</span>First Name :
                            </div>
                            <div class="col-sm-8">
                                <asp:TextBox ID="txtName" runat="server" placeholder="First Name"</asp:TextBox>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="row">
                        <div class="col-sm-12 col-md-12 col-lg-12">
                            <div class="col-sm-2">
                            </div>
                            <div class="col-sm-10" style="float: right">
                                <asp:Button ID="btnNext" Width="150" runat="server" Text="NEXT" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="professional" class="tab-pane fade">
            </div>

            <div id="accountinformation" class="tab-pane fade">
            </div>
        </div>
    </div>
</form>

选项卡控件的图像：

Answer 1

在您的内容后创建一个 button divs 并在此按钮上调用函数

<input type="button" value="Next" onclick="ShowNextTab();" />

function ShowNextTab() {
  if ($('.nav-tabs > .active').next('li').length == 0) //If you want to select first tab when last tab is reached
        $('.nav-tabs > li').first().find('a').trigger('click');
    else
        $('.nav-tabs > .active').next('li').find('a').trigger('click');
}

下面是完整的解决方案

HTML

<form id="form1" runat="server">
    <div class="container">
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#personal">Personal Information</a></li>
            <li><a data-toggle="tab" href="#professional">Professional Information</a></li>
            <li><a data-toggle="tab" href="#accountinformation">User Account Infromation</a></li>
        </ul>
        <div class="tab-content">
            <div id="personal" class="tab-pane fade in active">

                <div class="form-group">
                    <div class="row">
                        <div class="col-sm-12 col-md-12 col-lg-12">
                            <div class="col-sm-4">
                                <span class="Star-clr">*</span>First Name :
                            </div>
                            <div class="col-sm-8">
                                <asp:TextBox ID="txtName" runat="server" placeholder="First Name"></asp:TextBox>//close tag is missing

                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="row">
                        <div class="col-sm-12 col-md-12 col-lg-12">
                            <div class="col-sm-2">
                            </div>
                            <div class="col-sm-10" style="float: right">


                                <asp:Button ID="btnNext" Width="150" runat="server"  Text="NEXT" />


                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div id="professional" class="tab-pane fade">

            </div>
            <div id="accountinformation" class="tab-pane fade">
            </div>

            <input type="button" value="Next" onclick="ShowNextTab();" />
            <input type="button" value="Prev" onclick="ShowPrevTab();" />
        </div>

    </div>
</form>

JavaScript

function ShowNextTab() {
        $('.nav-tabs > .active').next('li').find('a').trigger('click');
    }
    function ShowPrevTab() {
        $('.nav-tabs > .active').prev('li').find('a').trigger('click');
    }

如何在 asp.net 中使用 bootstrap 创建选项卡控件

How to make a tab control with bootstrap in asp.net

c#

bootstrapping

tabcontrol