Only show specific div with anchor

问题

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

回答1:

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

来源：https://stackoverflow.com/questions/14988930/only-show-specific-div-with-anchor

标签

jquery

html