Home/ Questions/Q 4093652
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T19:38:42+00:00

I have a question. I visited a site : http://currenthiphop.com/ . And when I

  • 0

I have a question.

I visited a site : http://currenthiphop.com/. And when I clicked on a link, the link on adress bar change to http://currenthiphop.com/#!/ + link. (like Twitter, Faceboook…)

However, in the attribut href, there is no #!. Why ?

Is is a ajax navigation isn’t ?
How can I do something like this ?

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This oughta get you started.

    http://jsfiddle.net/f6dBV/

    EDIT – jsFiddle is actually not showing the location.hash bit. Here it is on my website: http://jfcoder.com/test/hash.html

    <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>
    • 0