I use jQuery, I need to make some anchor tags perform no action.
I usually write it like this:
<a href="#">link</a>
However this refers to the top of the page!
There are a few less than perfect solutions:
1. Link to a fake anchor
<a href="#">
Problem: clicking the link jumps back to the top of the page
2. Using a tag other than 'a'
Use a span tag and use the jquery to handle the click
Problem: breaks keyboard navigation, have to manually change the hover cursor
3. Link to a javascript void function
<a href="javascript:void(0);">
<a href="javascript:;">
Problem: breaks when linking images in IE
Solution
Since these all have their problems, the solution I've settled on is to link to a fake anchor, and then return false from the onClick method:
<a href="#" onClick="return false;">
Not the most concise of solutions, but it solves all the problems with the above methods.
<a href="javascript:;">
href="javascript:"
is also enough and works in the latest major browsers. No need for the semicolon, in fact PhpStorm even suggests to remove it.
If you don't want to have it point to anything, you probably shouldn't be using the <a>
(anchor) tag.
If you want something to look like a link but not act like a link, it's best to use the appropriate element (such as <span>
) and then style it using CSS:
<span class="fake-link" id="fake-link-1">Am I a link?</span>
.fake-link {
color: blue;
text-decoration: underline;
cursor: pointer;
}
Also, given that you tagged this question "jQuery", I am assuming that you want to attach a click event hander. If so, just do the same thing as above and then use something like the following JavaScript:
$('#fake-link-1').click(function() {
/* put your code here */
});
To make it do nothing at all, use this:
<a href="javascript:void(0)"> ... </a>
<a href="javascript:;">
. P.S. doesn't work with target=_blank
though
Apr 1, 2018 at 22:54
The correct way to handle this is to "break" the link with jQuery when you handle the link
HTML
<a href="#" id="theLink">My Link</a>
JS
$('#theLink').click(function(ev){
// do whatever you want here
ev.preventDefault();
ev.stopPropagation();
});
Those final two calls stop the browser interpreting the click.
There are so many ways to do it like
Dont add and href
attribute
<a name="here"> Test <a>
You can add onclick event instead of href like
<a name="here" onclick="YourFunction()"> Test <a>
Or you can add void function like this which would be the best way
<a href="javascript:void(0);">
<a href="javascript:;">
href
attribute as it will no longer behave like a hyperlink (even though the onclick still works) you'll have to reset stuff like cursor: pointer;
and the :hover
selector.
What do you mean by nothing?
<a href='about:blank'>blank page</a>
or
<a href='whatever' onclick='return false;'>won't navigate</a>
This answer should be updated to reflect new web standards (HTML5).
This:
<a tabindex="0">This represents a placeholder hyperlink</a>
... is valid HTML5. The tabindex attribute makes it keyboard focusable like normal hyperlinks. You might as well use the span
element for this as mentioned previously, but I find using the a
element more elegant.
See: https://w3c.github.io/html-reference/a.html
and: https://html.spec.whatwg.org/multipage/links.html#attr-hyperlink-href
Some JavaScript to respond to clicking the link (or tabbing to the link, pressing Enter):
<script type="module">
let linkActivated = e => {
alert(`Event triggered: ${e.type}`);
};
document.querySelectorAll('a:not([href])').forEach(el => {
el.addEventListener('keydown', e => {
if (e.key == 'Enter') {
linkActivated(e);
}
});
el.addEventListener('click', linkActivated);
});
</script>
click
event when user focuses the element and presses enter (tested in Firefox 51).
I think you can try
<a href="JavaScript:void(0)">link</a>
The only catch I see over here is high level browser security may prompt on executing javascript.
Though this is one of the easier way than
<a href="#" onclick="return false;">Link</a>
this should be used sparingly
Read this article for some pointers https://web.archive.org/web/20090301044015/http://blog.reindel.com/2006/08/11/a-hrefjavascriptvoid0-avoid-the-void
Here are the three ways for <a>
tag's href
tag property refer to nothing:
<a href="JavaScript:void(0)"> link </a>
<a href="javascript:;">link</a >
<a href="#" onclick="return false;"> Link </a>
I know this is an old question, but I thought I'd add my two cents anyway:
It depends on what the link is going to do, but usually, I would be pointing the link at a url that could possibly be displaying/doing the same thing, for example, if you're making a little about box pop up:
<a id="about" href="/about">About</a>
Then with jQuery
$('#about').click(function(e) {
$('#aboutbox').show();
e.preventDefault();
});
This way, very old browsers (or browsers with JavaScript disabled) can still navigate to a separate about page, but more importantly, Google will also pick this up and crawl the contents of the about page.
Make sure all your links that you want to stop have href="#!"
(or anything you want, really), and then use this:
jq('body').on('click.stop_link', 'a[href="#!"]',
function(event) {
event.preventDefault();
});
You can have an HTML anchor (a
tag) without an href
attribute. Leave off the href
attribute & it won't link to anything:
<a>link</a>
The only thing that worked for me was a combination of the above:
First the li
in the ul
<li><a onclick="LoadTab2_1()" href="JavaScript:void(0)">All Assigned</a></li>
Then in the LoadTab2_1 I manually switched the tab divs.
$("#tabs-2-1").hide();
$("#tabs-2-2").show();
This is because the disconnection of the also disconnects the action in the tabs.
You also need to manually do the tab styling when the primary tab changes things.
$("#secTab1").addClass("ui-tabs-active").addClass("ui-state-active").addClass("ui-state-hover").addClass("ui-state-focus");
$("#secTab1 a").css("color", "#ffffff");
<a href="#" onclick="SomeFunction()" class="SomeClass">sth.</a>
this was my anchor tag. so return false on onClick="" event is not usefull here. I just removed href="#" property and it worked for me just like below
<a onclick="SomeFunction()" class="SomeClass">sth.</a>
and i needed to add this css.
.SomeClass
{
cursor: pointer;
}
I encountered this issue on a WordPress site. The headers on dropdown menus always had the attribute href=""
and the header plugin being used only allowed standard urls. The easiest solution there was just to run this code in the footer:
jQuery('[href=""]').click(function(e){
e.preventDefault();
});
This will prevent blank anchors from doing anything.
React no longer support using a function like this href="javascript:void(0)"
in your anchor tag, but here is something that works pretty well.
<a href="#" onClick={() => null} >link</a>
If you want to stop redirect to another page after clicking on the link you can do the following
<a href="/your-page" onClick={(e)=>e.preventDefault()}>link</a>
I know this is tagged as a jQuery question, but you can answer this with AngularJS, also.
in your element, add the ng-click directive and use the $event variable which is the click event... prevent its default behavior:
<a href="#" ng-click="$event.preventDefault()">
You can even pass the $event variable into a function:
<a href="#" ng-click="doSomething($event)">
in that function, you do whatever you want with the click event.
In HTML5 just remove the href
attribute
<a>Your text</a>
href
attribute at in it.