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>

我的问题是网址没有改变以反映内容，但我不想创建一个单独的页面。我可以想象我需要使用链接锚点，但我不确定如何这样做。

提前谢谢

Answer 1

您可以使用以下命令更改网址的哈希值：

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

Answer 2

如果你所做的只是设置网址中的文字，可以通过设置location.hash

轻松完成此操作

location.hash="#SomeTextHereThatMayOrMayNotNecessarilyBeAnAnchor"

^请注意＆＃34;＃＆＃34;很重要

更改网址以反映使用Javascript隐藏/显示的页面上的内容

2 个答案: