c# - Cannot Switch between Bootstrap Tabs
问题描述
I need to switch between Bootstrap tabs on a button click in each tab .However Its not working .I have been trying various ways but couldn't find any help.Any help will be really appreciated. Thanks in Advance.
<div class="col-md-6" style="width:100%;margin-top:20px">
<div class="tab" id="tabs1" role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="TabList" role="tablist">
<li id="result1" role="presentation" runat="server"><a href="#Section7" aria-controls="home" role="tab" data-toggle="tab">Registration</a></li>
<li id="result2" role="presentation" runat="server" ><a href="#Section8" aria-controls="home" role="tab" data-toggle="tab">Financially Personal Details</a></li>
<li role="presentation" ><a href="#Section9" aria-controls="home" role="tab" data-toggle="tab">Confirmation</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content tabs">
<!-- Information -->
<div role="tabpanel" runat="server" id="Section7">
<table width="100%" align="center" >
<tr><td colspan="4">
<table width="100%">
<tr><td ><label > Name </label><asp:TextBox ID="txt_Name" runat="server"
Width="200px"></asp:TextBox>
</td><td align="left"><label >Contact Number </label>
<asp:TextBox ID="txt_Cnumber" TabIndex="8" runat="server"></asp:TextBox>
</td>
</tr>
</tr>
<tr>
<td><asp:Button ID="but_Submit" runat="server" Text="Register"
OnClick="but_Submit_Click" TabIndex="23"></asp:Button>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--End Information -->
<!-- Financially Party -->
<div role="tabpanel" runat="server" id="Section8">
<table width="100%" align="center" >
<tr><td colspan="4">
<table width="100%" class="w3-card w3-table w3-small">
<tr><td ><label >Bearer Name</label>
<asp:TextBox ID="txt_fbname" runat="server"></asp:TextBox>
</td><td align="left"><label >Relation to Patient </label>
<asp:TextBox ID="txt_rtp" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td><asp:Button ID="Button6" runat="server" Text="SAVE"
OnClick="but_Submit1_Click" TabIndex="23"></asp:Button>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--End Financially Responsible Party -->
<!--Emergency Contact -->
<div role="tabpanel" class="tab-pane fade" id="Section9">
<table width="100%" class="w3-card w3-table w3-small">
<tr><td ><label >Contact Name </label><asp:TextBox ID="txt_emname"
runat="server" Width="200px"></asp:TextBox>
</td><td align="left"><label >Relation to Patient </label>
<asp:TextBox ID="txt_emrtp" runat="server" Width="200px"></asp:TextBox>
</td>
</tr>
<tr>
<td><asp:Button ID="Button5" runat="server" Text="SAVE"
OnClick="but_Submit2_Click" TabIndex="23"></asp:Button>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--End Emergency Contact -->
This is my code behind :
Page load :
result1.Attributes.Add("class", "active");
Section7.Attributes.Add("class", "tab-pane active");
//hide the employment tab (menu and content)
Section8.Attributes.Remove("class");
Section8.Attributes.Add("class", "tab-pane");
result2.Attributes.Remove("class");
result2.Attributes.Add("class", "nav nav-tabs");
Buttton_Click Event:
result2.Attributes.Add("class", "active");
Section8.Attributes.Add("class", "tab-pane active");
//hide the personal tab (menu and content)
Section7.Attributes.Remove("class");
Section7.Attributes.Add("class", "tab-pane");
result1.Attributes.Remove("class");
result1.Attributes.Add("class", "nav nav-tabs");
This is my code.It is working fine .But after button click it doesn't switch to the next tab.
解决方案
推荐阅读
- c++ - QGeoCodingManager 没有给出错误但没有结果
- python-3.x - Selenium webdriver.Remote 在 Linux 上出现 SSL 错误,适用于 macOS
- javascript - 当我点击它时,视频无法在手机上播放
- uml - 通信图或系统序列图中的接口描述?
- linux - 找不到 libisl.so.15
- scala - 如何运行 akka-sample-distributed-data-scala 演示
- php - Sabre Webservices EnhancedAirBook 带婴儿
- php - 我在一个树枝页面中同时渲染了登录和注册控制器,但它一直给我错误
- amazon-web-services - 使用推荐的配置后,当存储桶不兼容时,AWS CLI S3 同步仍然失败
- apache-spark - 如何在火花中缓存随机森林模型