Navigate to new content without page reload while updating the address field

Question

I'm using Javascript to show documents. First, I hide the content that is loaded. Then, if a user press a button, the text related to that button will become visible while hiding other texts.

Currently, my technique does not change the URL that shows in the address bar.

I would like to update the address bar when a user clicks on one of the content display buttons. For example:

address.com/value_of_button

And if a user enters:

adress.com/a_value

I want to change display of div associated with the value. How is this done?

The ["hashbang" (`#!`)](http://stackoverflow.com/questions/3009380/whats-the-shebang-hashbang-in-facebook-and-new-twitter-urls-for) technique is one that had a few followers at one time. — Jared Farrish, Feb 04 '12 at 12:11
A good writeup on [Hash URIs](http://www.jenitennison.com/blog/node/154) and some information on how [jQuery UI handles this](http://stackoverflow.com/questions/570276/changing-location-hash-with-jquery-ui-tabs). — Jared Farrish, Feb 04 '12 at 12:13
Careful when using Javascript to hide content; it can cause content to 'appear then disappear,' which is not very user friendly. Consider using a CSS style that makes the elements invisible. — Jeffrey Sweeney, Feb 04 '12 at 13:30

score 3 · Answer 1 · answered Feb 04 '12 at 12:34

You can always use a hash url, and set the url like this:

function setHash(var hash) {
    window.location.hash = hash;
}

If you want to retrieve the hash in the link to update the page, you can use something like

function getHash() {
    return window.location.hash;
}

And to update the page you can just simply use if statements like this:

if(getHash() == "#main") {
    document.getElementById('content').innerHtml = "<p>Main content</p>";
}

score 0 · Answer 2 · edited Jul 03 '17 at 13:04

I had already demonstrated this at some point in the last year with jQuery. It's possible to not use jQuery, of course, but I'll provide you with the demo I created. I'll port an example to regular Javascript as well.

<html>
<head>
<style type="text/css">
.content {
    display: none;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    $('#menu a').each(function(){
        id = $(this).attr('href');
        id = id.substring(id.lastIndexOf('/'));
        id = id.substring(0,id.indexOf('.'));
        $(this).attr('rel',id);
    });
    $('#home').show();
    $('#menu a').click(function(e){
        e.preventDefault();
        $('.content').hide();
        $('#'+$(this).attr('rel')).show();
        location.hash = '#!/'+$(this).attr('rel');
        return false;
    });
});

</script>
</head>
<body>
<div id="menu">
    <a href="home.html">Home</a> -
    <a href="one.html">One</a> -
    <a href="two.html">Two</a> -
    <a href="three.html">Three</a>
</div>
<div id="home" class="content">
    Home content.
</div>
<div id="one" class="content">
    One content.
</div>
<div id="two" class="content">
    Two content.
</div>
<div id="three" class="content">
    Three content.
</div>
</body>
</html>

EDIT

DOM method as promised:

<html>
<head>
<style type="text/css">
.content {
    display: none;
}
</style>
<script type="text/javascript">

window.onload = function(){
    var links = document.getElementById('menu').getElementsByTagName('a'),
        divs = document.getElementsByTagName('div'),
        sections = [],
        id = '';

    for (var i = 0, size = divs.length; i < size; i++) {
        if (divs[i].className.indexOf('content') != -1) {
            sections.push(divs[i]);
        }
    }

    for (var i = 0, size = links.length; i < size; i++) {
        id = links[i].href;
        id = id.substring(id.lastIndexOf('/') + 1);
        id = id.substring(0,id.indexOf('.'));

        links[i].rel = id;

        links[i].onclick = function(e){
            e.preventDefault();

            for (var p = 0, sections_size = sections.length; p < sections_size; p++) {
                sections[p].style.display = 'none';
            }

            document.getElementById(this.rel).style.display = 'block';
            location.hash = '#!/' + this.rel;

            return false;
        }
    }

    document.getElementById('home').style.display = 'block';
};

</script>
</head>
<body>
<div id="menu">
    <a href="home.html">Home</a> -
    <a href="one.html">One</a> -
    <a href="two.html">Two</a> -
    <a href="three.html">Three</a>
</div>
<div id="home" class="content">
    Home content.
</div>
<div id="one" class="content">
    One content.
</div>
<div id="two" class="content">
    Two content.
</div>
<div id="three" class="content">
    Three content.
</div>
</body>
</html>

Navigate to new content without page reload while updating the address field

2 Answers2