深度链接div块

Question

I am looking for a way to deep link div blocks. On a particular page I might have several div blocks each with its own contents. One of this blocks is visible, others are hidden. Once a link or a button is pressed the corresponding div is shown and others are hidden. Here is the HTML for the divs:

<div id="6ba28aae2dae153a1686cfee276632d8" class="page-block" style="display: block;">
    <p>
    1st block. 
    </p>        
</div>
<div id="55cead0effa915778913d8667d0ae3a9" class="page-block" style="display: none;">
    <p>
    2nd block. 
    </p>
</div>

And here is the JavaScript used to switch the blocks.

/* Hide and show necessary blocks. */
function switchBlocks(UID)
{
    var blocks = $('div.page-block');

    for (i=0; i<blocks.length; i++) 
    {
        if (blocks[i].id == UID) 
        {
            blocks[i].style.display= 'block';

            // Get the current URL and split it at the # mark
            urlArray = window.location.href.split("#");
            // Select the part before #
            subURL = urlArray[0];
            // Create a fake URL by adding UID to subURL
            history.pushState(null, null, subURL + '#' + UID);
        } 
        else 
        {
            blocks[i].style.display= 'none';
        }
    }
}

What I am trying to do now is assign each block its unique URL by using the blocks ID. I am able to update the URL with the relevant ID yet can't figure out how to link the particular URL to a specific block so that the corresponding block is shown when accessing its URL.

I have studying the tutorial on the HTML5 History API but can't quite figure out how to apply it to my case.

Answer 1

if(window.location.hash == "#55cead0effa915778913d8667d0ae3a9")
{
 $("div.page-block").hide();
 $("div#55cead0effa915778913d8667d0ae3a9").show();
}

or

hash_id = window.location.hash;
if(hash_id.length > 0)
{
 $("div.page-block").hide();
 $(hash_id).show();
}

Answer 2

I think it is better to add and remove classes then having the desired css effect. I believe this is more efficient but I could be wrong.

You could also store a reference to the old div that is being shown so that you could just hide that one and show the other rather then iterating over an entire list of divs. In reality you only need to show one div and hide one div.

As far as browser history support. Do you need this to be cross browser supported? html5 history API is not supported in all browsers. This may not be a problem or concern for you.

List of supported browsers
http://caniuse.com/#search=history

I have used jquery bbq to add history support to a web application. It works well in older browsers.
http://benalman.com/projects/jquery-bbq-plugin/

For big javascript projects Backbone.js is the way to go it has browser history support as well as many other helpful built in functions that make it easy to manage your code base.