问题描述
首先,我的编码技巧非常基础,请耐心等待。我正在制作一个有很多人参与的艺术展览的网站。
我有一个名为profiles.html的页面,其中包含所有贡献者的个人资料。
每个配置文件都在称为配置文件的DIV中随着人名的锚标签一起满足。
如果有人前往网站
www.example.com/profiles.html
,他们会看到所有的配置文件。
然而,当他们转到
www.example.com/profiles.html#example.name
时,他们只会看到个人资料的人。
我已经浏览过互联网,试图找到答案,但我还没有找到答案。
更新:
后续问题。是否有可能在profiles.html中显示/加载额外的内容,这些内容将在profiles.html中看不到。
假设您有:
class =profile
的包装
然后我相信你想要这样的东西:
//在页面加载
$(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 websitewww.example.com/profiles.htmlthey will see all of the profiles.
However when they go to
www.example.com/profiles.html#example.namethey 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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!