只显示具有锚点的特定div [英] Only show specific div with anchor

问题描述

首先，我的编码技巧非常基础，请耐心等待。

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

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

每个配置文件都在称为配置文件的DIV中随着人名的锚标签一起满足。

如果有人前往网站
www.example.com/profiles.html
，他们会看到所有的配置文件。

然而，当他们转到

www.example.com/profiles.html#example.name
时，他们只会看到个人资料的人。

我已经浏览过互联网，试图找到答案，但我还没有找到答案。

更新：

后续问题。是否有可能在profiles.html中显示/加载额外的内容，这些内容将在profiles.html中看不到。

解决方案

假设您有：

• 每个配置文件周围包含 class =profile的包装


• 每个pofile包装上的id都与您的hash匹配（如example.name）

然后我相信你想要这样的东西：

  //在页面加载
 $（document）.ready （函数（）{
 
 //反应点击锚点
 window.onhashchange = hashChanged; 
 
 //直接输入url类型
 hashChanged （）; 
 
}）; 
 
 //当URL哈希值（#something）改变时
函数hashChanged（）{
 //隐藏所有配置文件
 $（'。profile'）。hide （）; 
 //获取当前hasj减去'＃'
 var profileId = window.location.hash.substr（1）; 
 //只显示相应的配置文件
 $（'＃'+ profileId）.show（）; 
} 
  

First of all, my coding skills are very basic so please bear with me.

I am making a website for an art exhibition which has many people contributing.

I have a page called profiles.html which contains all of the profile of the people who have contributed.

Each profile is contented within a DIV called profiles along with an anchor tag of the persons name.

If people go to the website www.example.com/profiles.html they will see all of the profiles.

However when they go to
www.example.com/profiles.html#example.name they will only see the profile of that person.

I have looked around the internet to try and find answers but I have not found any.

UPDATE:

A follow up question. Is it possible to show/ load extra content in the profiles.html#examplename that would not be seen in profiles.html

解决方案

Assuming you have:

• A wrapper with class="profile" around each profile
• And id on each pofile wrapper, matching your hash (like "example.name")

Then I believe you want something like this:

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

这篇关于只显示具有锚点的特定div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！