仅显示带有锚点的特定 div

Question

首先，我的编码技能非常基础，请多多包涵。

我正在为一个有很多人参与的艺术展览制作一个网站。

我有一个名为profiles.html 的页面，其中包含所有贡献者的个人资料。

每个配置文件都包含在一个称为配置文件的 DIV 中，并带有一个人名的锚标记。

如果人们访问该网站 www.example.com/profiles.html 他们将看到所有的配置文件。

但是当他们去
www.example.com/profiles.html#example.name 他们只会看到那个人的个人资料。

我已经在互联网上四处寻找答案，但我没有找到任何答案。

更新：

一个后续问题。是否可以在profiles.html#examplename中显示/加载在profiles.html中看不到的额外内容

Answer 1

假设你有：

• 每个配置文件都带有class="profile" 的包装器
• 每个 pofile 包装器上的 id 与您的哈希匹配（如“example.name”）

那么我相信你想要这样的东西：

// On page load
$(document).ready(function(){

    // React to clicks on anchors
    window.onhashchange = hashChanged;

    // React to directly type urls
    hashChanged();

});

// When the URL hash (#something) changes
function hashChanged() {
    // hide all profiles
    $('.profile').hide();
    // get the current hasj minus '#'
    var profileId = window.location.hash.substr(1);
    // show only the appropriate profile
    $('#' + profileId).show();
}