单击并通过哈希

时间:2017-08-05 22:02:04

标签: javascript jquery css asp.net twitter-bootstrap

我有自举选项卡和药片,我有点击时更改活动类的功能,以便激活我的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>

我可能必须首先获取父名称,如果它尚未激活则激活它。然后我或许可以实现我的目标。我能做到吗?

0 个答案:

没有答案