How to link a hash link from the URL to Javascript content?

Question

I've once used jQuery UI in order to add the tab feature to one of my project.

Everything was working just fine, and I noticed each tab was bound to a URL hash tag (I do not know you say it in english). As an example, once I clicked on the first tab, #Tab0 was added to my URL.

I want to reproduce this behavior in my current project. But I'm not using jQuery UI tabs, I am porting a desktop application and there are JavaScript buttons which write and replace content inside my page (in the manner of different pages, but without reloading).

How do I proceed to mimic this behavior ? Do I have to manually fetch the tag in the URL and do things accordingly all by JavaScript ?

Thanks,

Also you can look here: http://stackoverflow.com/questions/9340121/which-one-is-better-pushstate-or-location-hash — , Jun 13 '13 at 10:21

score 1 · Accepted Answer · answered Jun 13 '13 at 09:43

1

u could do it this way:

creating an url with hash from current url:

var url = window.location.href + '#Tab0';

reading a hash from current url:

var hash;

if (window.location.href.indexOf('#') > -1)
{
    hash = url.split('#')[1];
}

answered Jun 13 '13 at 09:43

So basically doing everything by hand. I will mark this as answered if I don't get anything else, thanks. – Mathieu Marques Jun 13 '13 at 09:47

score 1 · Answer 2 · edited Jun 13 '13 at 15:58

you can do this by using location.hash:

//you can set hash
location.hash = "something"; 

//and read it eg. http://domain.com#something
console.log(location.hash); //will return the current hash value 'something'

Also you have to remember that if your anchor tag has hashed href attribute e.g. <a href="#something"> it will be appended automatically to current url and browser will try to find given id on the page. Of course you can prevent that default behaviour.

How to link a hash link from the URL to Javascript content?

2 Answers2