Disable a link using css

Question

Is there any way to disable a link using css?

I have class called current-page The links having this class should be disabled(means no action should be occur when clicking on it).

Answer 1

There's no way to disable a link with pure CSS: you could do so with javascript.

Answer 2

CSS can't do that. CSS is for presentation only. Your options are:

• Don't include the href attribute in your <a> tags.
• Use JavaScript, to find the anchor elements with that class, and remove their href or onclick attributes accordingly. jQuery would help you with that (NickF showed how to do something similar but better).

Answer 3

You can set href attribute to javascript:void(0)

<style>
.disabled{
    /*Disabled link style*/
    color:black;
}
</style>

<a class="disabled" href="javascript:void(0)">LINK</a>

Answer 4

CSS can only be used to change the style of something. The best you could probably do with pure CSS is to hide the link altogether.

What you really need is some javascript. Here's how you'd do what you want using the jQuery library.

$('a.current-page').click(function() { return false; });

Answer 5

Only way you could do this without CSS would be to set a CSS on a wrapping div that made your a disappear and something else take it's place.

EG: <div class="disabled"><a class="toggleLink" href="wherever">blah</a><span class="toggleLink">blah</span></div>

With a CSS like

.disabled a.toggleLink { display: none; }
span.toggleLink { display: none; }
.disabled span.toggleLink { display: inline; }

To actually turn off the A you'll have to replace it's click event or href, as described by others.

PS: Just to clarify I'd consider this a fairly untidy solution, and for SEO it's not the best either, but I believe it's the best with purely CSS.

Answer 6

"www.google.com" disabled=disabled