html anchor with javascript

How does this work? An example is jquery tabs where they have:

<a href="#home">home</a>
<a href="#work">work</a>

How do they link the javascript with the anchors?

I've seen impl开发者_如何转开发ementations with anchors and implementations without but I don't understand why? Do these anchors have 'click' events like you would do without anchors?

I'm not 100% what you want to know, but here is my attempt to answer your question:

Why are no IDs used?

There are various ways to select an element, not only by using the id. Especially when you want to select several elements at once, ids don't help you much. jQuery (sizzle) selectors ^[docs] are a superset of CSS3 selectors ^[docs].
E.g. assuming the links are all contained in one element with id #tabs, we can do:

$('#tabs a').click(function(){...});

to attach a click event handler to all of the links (see .click() ^[docs] for more information about this method).

Why are links (<a>) used?

Links (anchor elements) are natural elements in HTML to link to something. This can be another URL or even an element in the same page ^[docs]. <a href="#home">home</a> links to an anchor with name home or to any other element with id home. Thus, even if JavaScript is disabled, these links will still work and make the browser scroll to the linked element.

In addition, the URL in address bar will change and a new history entry will be created.

Further reading: W3C - HTML4, section 12.2: The A element.

Adding the JavaScript functionality later but keeping the site working without JS, is often referred to as unobtrusive JavaScript ^[Wikipedia].

Well the beauty of the links with the anchors is that the page can still function without javascript.

As for how they link the javascript with the anchors...

JavaScript can see all of the HTML that has loaded before the JS runs. (In jQuery, we ensure that the JS waits for the right moment by listening for the ready event.

The browser provides tools to identify and manipulate the HTML code, and libraries like jQuery package those tools in a convenient and standardized form.

So, to link JS with those anchors we can do things like:

$('a[href="#home"]').css ('color', 'red');

Or:

$('a[href="#work"]').click ( function () {
alert ("Still workin', boss!");

} );

See what it looks like in action at jsFiddle.

Here, we don't really need ids, because the href, anchor values are unique and descriptive. By omitting id's the code is a little cleaner, and the developer doesn't have to maintain a correlation between: anchors, hrefs, and id's.

For the use, maybe the onhashchange is setted or in the click event the href is checked ( with a switch for example ).

Why use it over an id, maybe for the start, if for example #firework throw a script firework, if you get to the page by http://url/page#firework the hash could be checked at the start and play the event.

<a href="#footer">Go to footer</a>

is not the same as

$('a#footer').something() 

'cause id this case the appropriate HTML would be:

<a id="footer">Footer</a>

This anchors 'same page links' are able to scroll the page, bringing you the desired element in view.

<a href="#footer">footer</a>

Now at the bottom of your page, miles away, you have some

<div id="footer">contact | about | home | back to top <br> Copyright (C) 2011 user781439 .....  </div>

it will scroll the page for you :) http://jsfiddle.net/roXon/sPBPM/

jQuery for example can load an external element into page using '#' but that is just referenced directly to a specified ID element. hrefs with '#' are the 'ID callers' .