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

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