Question

我有一个页面，其中有3个占位符和文本。这些都隐藏在page_load上，jQuery根据是否有标签将它们设置为可见。

我想使用<a href="#references"></a>等主题标签来使用内联链接。根据标签，我想显示/隐藏其他内容。

使用查询字符串很容易上班，但遗憾的是，在我的情况下，这会给搜索引擎带来非常糟糕的优势。

我有一个解决方案，但有一个主要问题。当用户单击顶部的菜单（附加了标签）时，它会转到链接，但我的jQuery首次在第二次单击时运行。发生以下情况：

我们在网址http://www.domain.com
用户点击我的菜单，网址为http://www.domain.com#info，但标记中没有任何更改
用户第二次点击菜单，网址相同，但现在标记更改

我的jQuery脚本：

 <script>
        $(document).ready(function () {
            updateview();
        });

        function updateview() {
            if (document.location.hash.search('calculator') !== -1) {
                $("#ContentContainer").hide();
                $("#VideoPnl").hide();
                $("#CalculatorPnl").show();
            }
            else if (document.location.hash.search('video') !== -1) {
                $("#CalculatorPnl").hide();
                $("#VideoPnl").show();
                $("#ContentContainer").hide();
            } else {
                $("#ContentContainer").show();
                $("#CalculatorPnl").hide();
                $("#VideoPnl").hide();
            }
        }

我的菜单

我菜单上的每个菜单点都添加了以下JavaScript，我希望在点击时更改屏幕，但这个第一次是第二次使用：

menu.Attributes.Add("onclick", "javascript:updateview()");

我在ASP.NET中的标记：

   <asp:Panel runat="server" ID="ContentContainer" ClientIDMode="Static">
        <asp:Literal runat="server" ID="ContentPlaceholder"></asp:Literal>

    </asp:Panel>

    <asp:Panel ID="CalculatorPnl" runat="server" ClientIDMode="Static">
        <asp:Literal runat="server" ID="CalculatorHeadlineLtl"></asp:Literal>
        <asp:Literal runat="server" ID="CalculatorPlaceholder"></asp:Literal>
    </asp:Panel>

    <asp:Panel ID="VideoPnl" runat="server" ClientIDMode="Static">
        <asp:Literal runat="server" ID="VideoHeadlineLtl"></asp:Literal>
        <asp:Literal runat="server" ID="VideoPlaceholder"></asp:Literal>
    </asp:Panel>

Answer 1

从点击处理程序中调用updateview。当updateview函数第一次执行时，url没有散列。在执行所有单击处理程序后，哈希将附加到URL。要说明这一点，请按以下方式重写updateview：

function updateview(evt) {
    if (evt && evt.preventDefault) {
        evt.preventDefault();
    } else if (event) {
        event.returnValue = false;
    }

    if (document.location.hash.search('calculator') !== -1) {
        $("#ContentContainer").hide();
        $("#VideoPnl").hide();
        $("#CalculatorPnl").show();
    }
    else if (document.location.hash.search('video') !== -1) {
        $("#CalculatorPnl").hide();
        $("#VideoPnl").show();
        $("#ContentContainer").hide();
    } else {
        $("#ContentContainer").show();
        $("#CalculatorPnl").hide();
        $("#VideoPnl").hide();
    }
}

前5行阻止事件执行其默认操作，即遵循链接并将哈希附加到URL。现在，如果单击菜单，则无论您单击多少次都不会发生任何事情。此外，使用您的早期代码，如果您第二次单击其他菜单项，您仍然会看到上一个菜单项的div。

现在很明显为什么会出现这个问题，我能想到的解决方案是： - 使用事件对象获取哈希值 - 显示正确的div - 让事件冒出来

您尚未显示菜单的代码，因此我假设它是ul，其中每个li包含a标记，其中包含所需的href集。我还假设将点击处理程序添加到每个锚标记。

相同的代码：

$(document).ready(function () {
        var hash = document.location.hash;
        updateview(hash);
    });

function updateview(hash) {

    if (!hash) {
        hash = document.location.hash;
    }

    if (hash.search('calculator') !== -1) {
        $("#ContentContainer").hide();
        $("#VideoPnl").hide();
        $("#CalculatorPnl").show();
    }
    else if (hash.search('video') !== -1) {
        $("#CalculatorPnl").hide();
        $("#VideoPnl").show();
        $("#ContentContainer").hide();
    } else {
        $("#ContentContainer").show();
        $("#CalculatorPnl").hide();
        $("#VideoPnl").hide();
    }
}

function menuClick(evt) {
    if (!evt) {
        evt = window.event;
    }

    var target = (evt.currentTarget) ? evt.currentTarget : evt.srcElement,
        hash = target.getAttribute('href');

    updateview(hash);
}

更改为updateview接受哈希作为参数。在dom ready中，此参数的值为document.location.hash。在点击处理程序中，它从已点击的href标记的anchor获取其值。 menuClick是您需要绑定到菜单中每个anchor标记的点击处理程序。

我不在WebForms中编码，所以我无法用精确的语义来帮助你。我希望你能够充分了解问题的原因和我的预期解决方案。

使用jQuery导航到hashtag - 显示/隐藏内容

1 个答案: