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?

Answer 1

If you wanted to add anchor then use this html code
Use this html code before where you want to put anchor
<a id="Write Your Anchor Here" class="invisible"></a>
i.e
<a id="anchor" class="invisible"></a> How to Put Anchor
or

<div id="youranchorname" class="anchor">

https://www.example.com/2016/11/how-to-add-html-code#anchor

by using this url the visitor will directly reached to the how to put anchor part in the post Thanks

Note : This url is just used for example purpose. It is not a working URL and your div tag must be closed with </div>

Answer 2

If the anchor element is a server side element, remove the href attribute. anchor.attributes.remove("href");

Answer 3

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 4

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 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.