Jquery: delete cursor pointer?

Question

Why can't I change the CSS tag a using jquery? For instance,

HTML

 <a href="#">1</a> <a href="">2</a> <a href="http://website.com/#/home/about/">3</a> <a href="http://website.com/home/about/">4</a> 

link 1 and 2 do not change, so I want to delete the cursor pointer.

JQuery

 $("a").click(function(e){ if($(this).attr("href") == "#" || $(this).attr("href") == "") { alert("this is non-clickable"); $(this).css({cursor:"default"}); e.preventDefault(); } else{ alert($(this).attr("href")); $(this).css({cursor:"pointer"}); e.preventDefault(); } }); 

Is it possible?

jsfiddle

Answer 1

If you want, you can just do it with CSS

 a[href="\#"], a[href=""] { cursor: default; } /* I've used an element[attr] selector here which will select all a tags with this combination, if you want to target specific a tags, wrap them in an element with a class and you can than refer as .class a[href]... */ 

Demo

If you want to disable links, you can achieve this too using the CSS property pointer-events: none;

Demo 2 (it will help you if JS is disabled, it will not warn you about it, but it will help you disable the event you are trying to do)

Answer 2

Your mistake is in your jquery css. You need quotes around css that should look like this:

 $("a").click(function(e){ if($(this).attr("href") == "#" || $(this).attr("href") == "") { alert("this is non-clickable"); $(this).css({'cursor' :"default"}); e.preventDefault(); } else{ alert($(this).attr("href")); $(this).css({'cursor':"pointer"}); e.preventDefault(); } }); 

You can also use the addClass method, then in css there is a style for href

Answer 3

try changing the line

The form

 $(this).css({cursor:"default"}); 

to

 $(this).css('cursor','default'); 

let me know if you encounter any problem