javascript - 更改 url 以反射(reflect)使用 Javascript 隐藏/显示的页面上的内容

Question

我目前正在为一家名为 HLArchitects 的建筑公司制作网站。在元素页面中，我创建了一个 HTML/Javascript 图片库。在主大图的右上方，可以找到一个选项，可以在图像/信息之间进行选择。我使用 Jquery 来显示和隐藏信息或图像，但我觉得这不是一个很好的方法。可以在这里查看以供引用:http://www.hla.co.za/projects/Hyuandai_Training_Centre/ 这是相关的 Javascript:

$(".selector a").click(function(){
    if ($(this).attr("data-show") == "images") {
        $("#info").fadeOut("fast");
        $("#displayImg").fadeIn("fast");
        $("#imageFlow").fadeIn("fast");
    } else if ($(this).attr("data-show") == "info") {
        $("#displayImg").fadeOut("fast");
        $("#imageFlow").fadeOut("fast");
        $("#info").fadeIn("fast");
    }
})

相关的 HTML:

<p class="selector"><a href="#" onclick="return false;" data-show="images">images</a> | <a href="#" onclick="return false;" data-show="info">information</a></p>

我的问题是 url 没有改变以反射(reflect)内容，但我不想制作一个单独的页面。我可以想象我需要使用链接 anchor ，但不确定如何使用。

提前谢谢你

Answer 1

您可以使用以下方法更改 url 的哈希值:

window.location.hash = 'images';

编辑:

首先，在这种情况下，您不需要包含哈希符号!

其次，我错过了显而易见的地方，您只需将 HTML 更改为这样即可正确更新 URL:

<p class="selector">
    <a href="#images">images</a>
    <a href="#information">information</a>
</p>

然后您可以在 jQuery 中使用以下内容，请注意我已将属性检查包含在选择器本身中:

$(".selector a[href=#images]").click(function() {
    $("#info").fadeOut("fast");
    $("#displayImg").fadeIn("fast");
    $("#imageFlow").fadeIn("fast");
});

$(".selector a[href=#info]").click(function() {
    $("#displayImg").fadeOut("fast");
    $("#imageFlow").fadeOut("fast");
    $("#info").fadeIn("fast");
});

如果您想刷新页面并获得相同的内容，您可以通过执行以下操作来检查散列标签(您可能需要根据最初显示的元素进行编辑):

$(document).ready(function() {
    if (window.location.hash == '#images') {
        $("#info").hide();
        $("#displayImg").show()
        $("#imageFlow").show();
    }
    else if (window.location.hash == '#info') {
        $("#displayImg").hide();
        $("#imageFlow").hide();
        $("#info").show();
    }
});