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

我有一个页面，其中有3个文本占位符。这些都在页面加载时隐藏，jQuery根据是否有hashtag将它们设置为可见

我想使用像

这样的hashtag来使用内联链接。根据标签的不同，我想显示/隐藏其他内容

使用QueryString很容易工作，但不幸的是，在我的例子中，这将导致非常糟糕的搜索引擎优化

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

我们在URL上

用户单击“我的菜单”，url为，但标记中没有任何更改

用户第二次单击菜单时，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();
            }
        }

   <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>

我在ASP.NET中的标记：

 <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();
            }
        }

   <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>

---

从单击处理程序中调用

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设置。我还假设click处理程序被添加到每个锚标记中

相同的代码：

$(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

获取其值

menuClick

是需要绑定到菜单中每个

anchor

标记的单击处理程序

---

我不使用WebForms编写代码，因此无法帮助您了解确切的语义。我希望您对问题的原因和我的预期解决方案有足够的了解

这是一个怪兽般的答案，值得大量的投票。谢谢！：-）