Is it possible to make the HTML anchor tag non-click / link using CSS?

Question

For example, if I have this:

<a style="" href="page.html">page link</a>

Can I use something for the style attribute so that the link does not click and leads me to page.html?

Or can I just not include the “page link” in the anchor tag?

Edit: I want to indicate why I want to do this so that people can give better advice. I am trying to customize my application so that the developer can choose what type of navigation style he wants.

So, I have a list of links, and one of them is always selected, and all the others are not. For links that are not selected, I obviously want them to be regular clickable anchor tags. But for the selected link, some people prefer the link to remain clickable, while others like it to not click.

Now I can just programmatically not wrap the anchor tags around the selected link. But I suppose it will be more elegant if I can always wrap the selected link in something like:

<a id="current" href="link.html">link</a>

and then let the developer control the style of binding through CSS.

Answer 1

You can use this css:

 .inactiveLink { pointer-events: none; cursor: default; } 

And then assign the class to your html code:

 <a style="" href="page.html" class="inactiveLink">page link</a> 

This makes the link not clickeable, but the cursor style - an arrow, not a hand, as links have.

or use this style in html:

 <a style="pointer-events: none; cursor: default;" href="page.html">page link</a> 

but I propose the first approach.

Answer 2

This is not easy to do with CSS, since it is not a behavioral language (e.g. JavaScript), the only simple way would be to use the OnClick JavaScript event on your anchor and return it as false, this is probably the shortest code you could use for this:

 <a href="page.html" onclick="return false">page link</a> 

Answer 3

Yes .. Maybe with css

 <a class="disable-me" href="page.html">page link</a> .disable-me { pointer-events: none; } 

Answer 4

Or just HTML and CSS without events:

 <div style="z-index: 1; position: absolute;"> <a style="visibility: hidden;">Page link</a> </div> <a href="page.html">Page link</a> 

Answer 5

CSS was designed to affect presentation, not behavior.

You can use javascript.

 document.links[0].onclick = function(event) { event.preventDefault(); }; 

Answer 6

A more unobtrusive way (if you are using jQuery):

HTML:

<a id="my-link" href="page.html">page link</a>

JavaScript:

 $('#my-link').click(function(e) { e.preventDefault(); }); 

The advantage of this is a clear separation between logic and representation. If one day you decide that this link will do something else, you do not need to mess with the markup, just JS.

Answer 7

Answer:

 <a href="page.html" onclick="return false">page link</a> 

Answer 8

 <a href="page.html" onclick="return false" style="cursor:default;">page link</a> 

Answer 9

This can be done in css and it is very simple. change "a" to "p". Your "link to the page" will in no way lead to anything if you want to make it invisible.

When you tell your css to make it hang on that particular "p", say this:

(for this example, I gave "p" the identifier "example")

 #example { cursor:default; } 

Now your cursor will remain the same as on the whole page.