load hashtag url content

Question

Here is my JSFiddle. Yesterday I posted question that how to create hashtag url. I got an answer, but if I refresh, it start from initial.

For example: If I refresh on #content 2, it show #content 1. I don't want that. I think I should use on load event. But don't know how to implement here. Any solution for this ? Please help me.

Answer 1

If you want your selection to be remembered across pages you'll need to store the selection on the session/server somewhere. Reloading the page starts your script from scratch, if you want to preselect something you'll need to get your data back from the session

Another option is use javascript to write the selection to a cookie, and read that cookie to set the initial selection

You can learn about using a cookie here. The example uses a cookie to store a username, but you could use it to store a variable 'content_selection' for example. Then when your page is loaded, read the cookie value and use it to select the proper initial content.

Answer 2

I've answered this at Create hashtag url using jquery. Just sharing this here because the linked thread was originally only about updating the URL with a hash tag (fragment identifier, actually), but the same issue about retaining the content after reload was eventually brought up by the OP in that thread.

And for those who don't wish to go the extra click, the codes are pretty straightforward. Just add the following after function setActive(i) { // codes }:

        var url = window.location.hash; // retrieve current hash value
        if(url.indexOf('Content') != -1){ // do the following if URL's hash contains "Content"
            // remove "#" symbol from retrieved hash value
            var currentHash = window.location.hash.substring(1).split("#");
            // remove "-" symbol from retrieved hash value
            var contentTitle = currentHash.toString().replace(/-/g, ' ');
            // store hash value in "actualContent" variable
            var actualContent = "This is " + contentTitle;
            // remove "selected" for every instance of "myclass" to hide content first
            $(".myclass").removeClass("selected");
            // find div that contains retrieved hash value's text stored in "actualContent" variable and add "selected" class to that div to display the correct content
            $("div:contains('" + actualContent + "')").addClass("selected");
        }