How do I make a link unclickable?

Question

Is there some CSS property or something that I can use with my anchor tag so as to make it unclickable or I HAVE to do stuff in code behind to get what I want?

[edit] onclink=return false; is refreshing the page..I dont want that..want this anchor tag to appear as a plain text..actuaaly I have css applied on anchor tag..so cant change it to simple lable or whatever

Answer 1

You can use

disabled="disabled"

in the anchor tag, I believe - that's what I do on csharpindepth.com, anyway. I wouldn't like to swear to how widely supported it is, admittedly - you probably want to check that. Seems okay on Chrome, IE and Firefox though. I don't know if there's an equivalent just in CSS.

Note that I believe this will make the link visibly unclickable (however the browser wants to do that) rather than just not do anything.

EDIT: I've just tried this on a local file, and it doesn't work... whereas it definitely works on csharpindepth.com. Worth trying then, but also probably worth looking at other approaches :)

EDIT: As BoltClock notes, this isn't strictly valid HTML - which may mean it will only work in quirks mode, for example. (That could explain my failure to produce it locally.)

You're probably better off with a JavaScript solution along with a CSS style to change the link appearance... but I'll leave this answer here just for the record.

Answer 2

<a href="abcd.html" onclick="return false;">abcd</a>

Answer 3

including an onclick="return false" attribute on the anchor element does the trick. While this solution uses javascript and not css

Answer 4

Hi,

http://www.dynamicdrive.com/forums/showthread.php?t=12258

Answer 5

If you want the anchor tag to be a link destination, but not a link source then omit the href attribute and only have a name attribute. The HTML 4.01 spec allows this and suggests that browsers display the text within the href-less anchor tag as normal text.

Answer 6

Here is the pure HTML/CSS solution :

1. remove the "href" tag, and put your anchor in the "name" attr (you probably knew this already)

2. Add the following style to your link :

   a{ text-decoration: none; cursor: default; }
   

You should target the anchor styles using named attributes, so all your links dont become "unclickable", like so :

a[name=*]{ text-decoration: none; cursor: default; }

Named attrs wont work in IE 6 (probably not in 7 either). A completely cross browser solution is to add a class to the anchors, and target that. Ex :

a.anchor{ text-decoration: none; cursor: default; }

Note: The above styling makes the links "appear" unclickable. If one of the a tags had an href you could still click it and it would "go somewhere" or "do something".

Hope this helps.

Answer 7

Hi, you only need to remove the HREF attribute!

Hope this helps you

Sebastian

Answer 8

Place a block style="position:absolute" right before the anchor tag and size it to overlay the content. Not sure why you want to make it unclickable most people are wondering how to make the links in a layered html clickable http://wsmithdesign.wordpress.com/2010/10/20/layering-html-with-absolute-positions-in-fluid-html/