Alternatives for using "#" in href attribute

Question

The <a> tag is used to create hyperlinks but in this age of jQuery and Ajax we are using it to load HTML into <div>s in the same page as the <a> tags.

That said, we set the href atribute as href="#", using or rather abusing the # character as a placeholder along with some undesirable side effects like the URL getting appended with the # character.

And if you leave the href attribute blank href = "", the link does not seem to work.

Is there anyway to do this in a cleaner way like showing some text or dummy function in the status bar of the browser when the user hovers over the link and yet make the link do what the programmer intended?

Here's my code.

<ul id="sidebarmenu1">
   // List that is converted into a menu... 
   <li> <a href="#" id="loadHotel" > HOTEL </a> </li>
   <li> <a href="#" id="loadCountry"> COUNTRY </a> </li>
   <li> <a href="#" id="loadCity"> CITY </a> </li>
</ul>

// The jQuery to load content into another div with Ajax
var loadUrl = "createHotel.php";
$("#loadHotel").click(function() {
    $("#mainContent").html(ajax_load).load(loadUrl);
}); 

// ajax function to load hotel ---> rooms page 

var url_loadRooms = "viewRooms.php";
$("#createRooms").click(function() {
    $("#mainContent").html(ajax_load).load(url_loadRooms);
});

What else can I use instead of "#" to make my code neat..?

Answer 1

The best solution is to not use some dummy placeholder at all. Use a meaningful URL which, if the link were actually followed, would show you the information you'd get from the AJAX request.

I do this regularly with my web apps, using Javascript to enhance a working site. For example, the HTML:

<a href="/users/index" rel="popup">View users</a>

The Javascript (jQuery):

$('a[rel*="popup"]').click(function() {
    loadPopup({    // whatever your favourite lightbox is, etc..
        url: this.href
    });
    return false;
});

The benefits of this are numerous. Your site is accessible to screen readers, web crawlers and users with javascript off, and even those with javascript turned on will get a meaningful URL in their status bar, so they'll know where they're going.

Answer 2

I usually use this:

href="javascript:void(0);"

Setting an anchor's href attribute to javascript:void(0); indicates to the browser that this anchor is not a hyperlink to another document or anchor,

Answer 3

If your onclick handler returns false, the link won't get followed by the browser. Try this:

<a href="#" onclick="alert('No # in the address bar!'); return false;">Click Me</a>

EDIT:

If you're absolutely hellbent on not using the octothorpe (ie. # symbol), you don't have to. Try this:

<a href="" onclick="alert('No change in the address bar!'); return false;">Click Me</a>

Answer 4

Why you need anything to be defined in href?

That's how SO works=>

<a id="close-question-1871874" title="closes/opens question for answering....">
  close<span title="3 more vote(s) needed to close this question"> (2)</span>
</a>

But - if link is supposed to actually navigate somewhere - keep normal href
and just e.preventDefault() regular behavior with jQuery.

Answer 5

Maybe I don't get smething, but if there is no link, you just shouldn't use an <a /> element in the first place. Use some <span /> or attach event listeners to list elements. You can style these elements to have cursor: pointer; using CSS.

Remember that browsers have some special actions associated with links, like "open in new tab", "save target element" etc. When you use dummy href='' attribute these actions work in a broken way, so it's better to not use links at all.

On the other hand, if you are able to render content of these ajaxified parts as normal pages (and it makes sense), follow nickf's advice.

Answer 6

nickf beat me to it; however, a few things should be mentioned. You should never use the "javascript" protocol for a link (unless maybe you intend for it to be a bookmarklet). It is the opposite of progressive enhancement. Whenever possible, the href attribute should be an actual URI resource so that it can gracefully degrade. In all other situations, "#" is encouraged and proper JavaScript should be used from preventing the page from scrolling to the top. There are two methods to do so. In the click handler, either prevent the default action, or return false.

$('a[rel*="popup"]').click(function(e) {
    e.preventDefault();
    loadPopup({url: this.href});
});

or

$('a[rel*="popup"]').click(function() {
    loadPopup({url: this.href});
    return false;
});

Answer 7

Using the "#" character as a placeholder basically makes the link "active." The browser interprets it as a tag that points to something else. If href is empty, the browser will assume the a tag is just another tag.

A way around that is to assign some CSS to a different tag that emulates the same functionality of the a tag. On hover, change the mouse, underline, change color, etc. You can easily change the window status and make it seem like the user is clicking on a link when in reality they aren't clicking a link so much as making a click event.

In fact, that's the better option, because running only a JS function through event binding that can't be used without JavaScript shouldn't be considered a link in the first place.

Answer 8

I always use this:

<a href="javascript:;">Click to your heart's delight</a>