Javascript – How To Remove The Trailing Hash In A URL

Ok, this is a quick note to myself, because I always seem to forget this code, and I have no idea why, because it’s so simple.

So, the scenario is that when I’m writing AJAX code, a lot of the times I use a hyperlink to trigger an action. For example, look at the following code…

1
2
3
4
5
6
7
8
9
10
11

<a href="#" class="open_div">Open Div</a>
 
<div id="show_content" style="display:none">Show stuff here....</div>
 
<script type="text/javascript">
$(document).ready(function(){
	$(".open_div").click(function () {
		$('#show_content').show();
	});
});
</script>

Ok, so what that code is basically doing is displaying a link, with the anchor text, Open Div. When the link is clicked, the show_content div will appear, with the containing content.

But the problem is, if I clicked that link on the BrightCherry homepage (assuming the code was there), the URL would change to this…

Anyone else experience this? It’s not actually a problem, but it irritates me because I find it ugly and weird (probably because I’m very particular).

The Solution

The fix ISN’T to simply remove the hash (#) from the A TAG, because then the code won’t work.

To stop the trailing hash from the URL, you just need to do the following…

1
2

// replace the hash with the following
<a href="javascript:void(0);" class="open_div">Open Div</a>

Ahhh, that’s better.

Out of curiosity, has this problem actually bothered anyone else?