Disable all A(URL) elements in DIV

Question

I have such html code

<div>
<p>MY Text <a href="url">Text</a>
</p>
</div>

I need using CSS or jQuery disable all A elements in DIV, when user move mouse over Text the URL is not active and he can't click on it. How to do that?

Answer 1

To prevent an anchor from following the specified HREF, I would suggest using preventDefault():

$(document).ready(function() {
    $('div a').click(function(e) {
        e.preventDefault();
    });
})

See:

http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29

or

$("div a").click(function(){
                alert('disabled');
                return false;

});

Answer 2

• Remove the href attribute; or
• Bind an onClick handler which returns false;

Answer 3

$('div a').click(function(e) { e.preventDefault(); });

If you don't want the links to appear as links, as Sjoerd says you can remove the href attribute instead:

$('div a').removeAttr('href');

(This might depend on whether the styles point to a or a:link though, I'm not entirely sure.)

Answer 4

$(document).ready(function () {
    $('div').hover(function(){
        $(this).find('a').attr('disabled','disabled');
    },function(){})
});

But why would you do that?