removeAttr("href") on anchor also removed text color

I have a web site that uses JQuery and JQuery UI.

For some links, I didn't want to use JQuery UI Theme's colors, so I overrided using my own css.

It all worked until I used $("#a_about").removeAttr("href") to remove the href from the anchors (so that the link wouldn't actually work, I just want to grab the click action) to my surprise, it also removed the color which my css applied, and returned to the color which JQuery UI Theme applied previously.

I tried to change the element on w开发者_Go百科hich the color is applied (the anchor itself, the parent container, etc...) but nothing helped. Thanks...

Instead of:

$("#a_about").removeAttr("href")

Use:

$("#a_about").attr("href","javascript:;")

It's because on some browser, a anchor a without attribute href is treat as normal text. So try change the href to javascript:; instead of remove it.

Anchor without href is not really a link. As others said set it to something like # and to "cancel" the click, also have:

$("#a_about").attr("href", "#").click(function() { return false; });

Don't touch the href. Prevent the default action in the event handler instead.

This way the link will continue to work if people, for example, middle click on it.