我有自举选项卡和药片,我有点击时更改活动类的功能,以便激活我的CSS样式到该选项卡。例如,当我从电子邮件中重定向时,我还可以使用一种特殊的药丸。
但我遇到了问题。当页面加载时,第一个选项卡有活动类,我可以单击其他选项卡,我可以去那里。好。但是,当我想被重定向到药片时,我只能去第一个标签的药片。我无法从其他标签激活药丸,可能是因为第一个标签仍处于活动状态。
以下是我的JQuery函数:
$(function () {
$("#tabs").tabs({
activate: function () {
var selectedTab = $('#tabs').tabs('option', 'active');
$("#<%= hdnSelectedTab.ClientID %>").val(selectedTab);
},
active: $("#<%=hdnSelectedTab.ClientID%>").val()
});
});
$(function () {
var hash = document.location.hash;
if (hash) {
$('.nav-tabs a[href="' + hash + '"]').tab('show');
}
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
window.location.hash = e.target.hash;
});
});
$(function () {
var hash = document.location.hash;
if (hash) {
$('.nav-pills a[href="' + hash + '"]').tab('show');
}
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
window.location.hash = e.target.hash;
});
});
HiddenField:
<asp:HiddenField ID="hdnSelectedTab" runat="server" Value="0" />
标签:
<div class="row back-style-inside">
<ul class="nav nav-tabs">
<li><a class="active" data-toggle="tab" href="#perfil" class="font-general">Perfil</a></li>
<li><a data-toggle="tab" href="#grupos" class="font-general">Os Meus Grupos</a></li>
<li><a data-toggle="tab" href="#menu2" class="font-general">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="perfil" class="tab-pane fade in active">
<ul class="nav nav-pills nav-stacked col-sm-4 col-md-3">
<li><a data-toggle="tab" href="#avatar" class="font-general">Avatar</a></li>
<li><a data-toggle="tab" href="#password" class="font-general">Alterar Palavra-Passe</a></li>
</ul>
<div class="tab-content col-sm-offset-4 col-md-offset-3">
<div id="avatar" class="tab-pane fade">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<div class="modal-load">
<div class="center">
<img src="Recursos/Imagens/Loading.gif" />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Image ID="img_Avatar" runat="server" />
<br />
<asp:FileUpload ID="file_Avatar" type="file" name="file" onchange="previewFile()" runat="server" />
<br />
<asp:Label runat="server" class="font-general color-white" Text="* Dimensões máximas: 162 x 290 (L x A); Tamanho máximo: 512Kb; Formatos aceites: GIF, JPG, e PNG."></asp:Label>
<br />
<br />
<asp:Button ID="btn_AlterarAvatar" runat="server" Text="Confirmar Alteração" class="btn btn-default" OnClick="btn_AlterarAvatar_Click" />
<br />
<asp:Label ID="lbl_ErroAvatar" runat="server" class="font-general color-white"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div id="password" class="tab-pane fade">
<div class="color-white font-general-big">Alterar Palavra-Passe</div>
<div class="col-xs-12" style="padding: 0; margin: 0;">
<div class="col-xs-11" style="display: inline-block; vertical-align: middle; padding: 0; margin: 0;">
<asp:TextBox ID="tb_PalavraPasse" runat="server" placeholder="Palavra-Passe" class="form-control object-fit-cover" TextMode="Password"></asp:TextBox>
</div>
<div class="col-xs-1 pull-right" style="display: inline-block; vertical-align: middle;">
<img id="img_Eye" runat="server" src="~/Recursos/Imagens/eye-icon.png" onmouseover="MouseOver_MudarTipoPassword()" onmouseout="MouseLeave_MudarTipoPassword()" />
</div>
<br />
<br />
<asp:TextBox ID="tb_ConfirmacaoPalavraPasse" runat="server" placeholder="Confirme a Palavra-Passe" class="form-control object-fit-cover" TextMode="Password"></asp:TextBox>
<br />
</div>
<asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel2">
<ProgressTemplate>
<div class="modal-load">
<div class="center">
<img src="Recursos/Imagens/Loading.gif" />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:Button ID="btn_AlterarPassword" runat="server" Text="Alterar" class="btn btn-default" OnClick="btn_AlterarPassword_Click" />
<br />
<asp:Label ID="lbl_ErroPassword" runat="server" class="font-general color-white"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
<div id="grupos" class="tab-pane fade">
<ul class="nav nav-pills nav-stacked col-sm-4 col-md-3">
<li><a data-toggle="tab" href="#gruposTodos" class="font-general">Todos</a></li>
<li><a data-toggle="tab" href="#gruposAdmin" class="font-general">Alterar Palavra-Passe</a></li>
</ul>
<div class="tab-content col-sm-offset-4 col-md-offset-3">
<div id="gruposTodos" class="tab-pane fade">
<asp:UpdateProgress ID="UpdateProgress3" runat="server" AssociatedUpdatePanelID="UpdatePanel2">
<ProgressTemplate>
<div class="modal-load">
<div class="center">
<img src="Recursos/Imagens/Loading.gif" />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
<ContentTemplate>
<br />
<div style="width: 100%; text-align: center;">
<asp:Label ID="lbl_Grupos" Style="width: 100%; text-align: center; display: block;" runat="server" class="font-general color-white" Text="Grupos"></asp:Label>
<asp:DropDownList ID="ddl_Grupos" runat="server" class="btn btn-default font-general" AutoPostBack="True" OnSelectedIndexChanged="ddl_Grupos_SelectedIndexChanged"></asp:DropDownList>
</div>
<br />
<div class="col-xs-6">
<asp:Label ID="lbl_TituloUtilizadores" Style="width: 100%; text-align: center; display: block;" runat="server" class="font-general color-white" Text="Utilizadores do grupo"></asp:Label>
<br />
<asp:ListBox ID="lb_Utilizadores" Style="width: 100%; text-align: center;" runat="server"></asp:ListBox>
</div>
<div class="col-xs-6">
<asp:Label ID="lbl_TituloCompeticoes" Style="width: 100%; text-align: center; display: block;" runat="server" class="font-general color-white" Text="Competições em que o grupo aposta"></asp:Label>
<br />
<asp:ListBox ID="lb_Competicoes" Style="width: 100%; text-align: center;" runat="server"></asp:ListBox>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
</div>
我可能必须首先获取父名称,如果它尚未激活则激活它。然后我或许可以实现我的目标。我能做到吗?