Question

Let’s say I have a label that triggers some javascript. For example:

HTML:

<a href="#" id="some_id">Trigger action!</a>
<!-- or, with appripriate CSS : -->
<span id="some_other_id">Trigger action!</span>

jQuery:

$("#some_id").click(function() {
   alert("some action") 
});

How do i best achieve that ?

My question is what should I see in at the bottom left of the browser when I hover on the link ? ie, what the href value should be ?

If the response is ‘none’, then the right method is with a span.

Example of few methods : http://jsfiddle.net/M3qkU/5/

Answer 1

It depends on whether you’re doing a web page or a web application.

If you’re doing a web page, try to have the link do something useful for people who don’t have JavaScript enabled. That way, the JavaScript is enhancing the page rather than required for it to work at all. This is called progressive enhancement. For example: Suppose you have a page and you want it to have tabs. Put the tabs in elements in order, and give each tab’s element an id value. The navigation links that take you to those tabs would have that id value in their fragment (e.g., #movies takes you to the movies element — the browser does this for you). Then when your JavaScript loads, have it turn those elements into tabs and take over the action of those links.

If you’re doing a web application, and the link triggers a “page change” or “tab change” sort of change in the UI, keep it as a link and make the href a fragment (e.g., #movies) that describes the “page” or “tab” that the application switches to when it happens. You could even use that information when processing the link, and you can use it when loading the page initially so your various page states become linkable. If the “link” doesn’t cause a location-style change in the application, most of the time make it a button instead (you can style button elements to a very significant degree, though I wouldn’t make them look like links).