0

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

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

使用查询字符串很容易开始工作，但不幸的是，在我的情况下，这将给搜索引擎优化带来非常糟糕的效果。

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

  1. 我们在 URL http://www.domain.com
  2. 用户点击我的菜单，网址是http://www.domain.com#info，但标记没有任何变化
  3. 用户第二次点击菜单，url是一样的，但是现在标记改变了

我的 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>
4

1 回答 1

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 就绪时，此参数的值来自document.location.hash. 在单击处理程序中，它从被单击href的anchor标记中获取其值。menuClick是您需要绑定到anchor菜单中每个标签的点击处理程序。

我不在 WebForms 中编码，所以我无法帮助您了解确切的语义。我希望您对问题的原因和我的预期解决方案有足够的了解。

于 2012-11-24T13:22:12.403 回答