Is it possible to use CSS to make an HTML anchor tag non-clickable/linkable?

Problem

For instance, let’s say I have this:

a style=”” href=”page.html”>a style=”” href=”page.html”>a style=”” href=”page a link to this page/a>

Is there anything I can use for the style attribute that will make it so the link isn’t clickable and won’t take me to page.html?

Or, is my only option to simply not wrap ‘page link’ in an anchor tag?

Edit: I’d like to explain why I’m doing this so that others can offer better suggestions. I’m attempting to configure my application such that the developer can select the navigation layout they like.

So, I have a list of links, one of which is always selected while the others are not. I obviously want standard clickable anchor tags for the links that aren’t selected. However, some people prefer that the selected link remain clickable, while others prefer that it be disabled.

Now I could simply not wrap an anchor tag around the selected link programmatically. But I think it’ll look nicer if I can always wrap the selected link in something like:

link

The developer can then use CSS to manage the connecting style.

Asked by Ryan

Solution #1

This css can be used:

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

Then add the class to your html code as follows:

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

It disables the link’s clickability and replaces the link’s cursor with an arrow rather than a hand.

or use the following html style:

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

However, I recommend starting with the first option.

Answered by Diego Unanue

Solution #2

Because CSS isn’t a behavioral language (like JavaScript), the only straightforward method to accomplish this would be to use a JavaScript OnClick Event on your anchor and return false; this is probably the quickest code you could use:

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

Answered by Karan K

Solution #3

Yes, you can do that with CSS.

<a class="disable-me" href="page.html">page link</a>

.disable-me {
    pointer-events: none;
}

Answered by pown

Solution #4

Alternatively, only HTML and CSS with no events:

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

Answered by Paul

Solution #5

CSS was created to modify appearance rather than behaviour.

You could use some JavaScript to help you out.

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

Answered by alex

Post is based on https://stackoverflow.com/questions/6727659/is-it-possible-to-make-an-html-anchor-tag-not-clickable-linkable-using-css