C# 如何在asp.net中使用bootstrap制作选项卡控件

在这里，我在asp.net应用程序中实现引导选项卡控件

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>

*名字：
在内容
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');
}

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

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