Question

我这里有两页：索引和结果。在results.html上，我有一些将CSS属性设置为display：none的div。我想从索引（导航菜单）导航并打开结果页面，同时显示隐藏的div。 jQuery在results.html上工作正常，但我不知道如何从索引中触发此函数。

索引：

<ul>
   <li><a id="menu-2016" href="results.html#2016">2016</a></li>
   <li><a id="menu-2015" href="results.html#2015">2015</a></li>
</ul>

结果：

<section id="2016">Content</section>
<section id="2015">Content</section>

CSS：

#section-2015, #section-2016 {
    display: none;
}

jQuery的：

$(document).ready(function () {
    $("#menu-2016").click(function () {
        $("#section-2016").slideDown();
        $("#section-2015").slideUp();
    });
    $("#menu-2015").click(function () {
        $("#section-2015").slideDown();
        $("#section-2014").slideUp();
    });
});

Answer 1

您只需检查URL哈希/片段。

$(document).ready(function() {
    if (window.location.hash == '#2016') {
       $("#section-2016").slideDown();
       $("#section-2015").hide();
    }
    if (window.location.hash == '#2015') {
       $("#section-2016").hide();
       $("#section-2015").slideDown();
    }
});

Answer 2

您可以使用

window.name

属性。始终通过Javascript实例化的窗口对象具有该属性，并且在同一窗口中加载新文档时始终保持相同。因此，将window.name设置为您来自的页面。在索引文件的页面加载上执行此操作。在结果文件中，您在页面加载时测试该条件，当您的索引文件只显示与其对应的隐藏内容时。

Answer 3

我想，把你的参数作为实际参数传递：

 <ul>
     <li><a id="menu-2016" href="results.html?year=2016">2016</a></li>
     <li><a id="menu-2015" href="results.html?year=2015">2015</a></li>
 </ul>

按照此处所述解析params：How can I get query params...

jQuery导航到另一个页面并显示div隐藏

3 个答案: