How to make link unclickable using CSS or jquery?

Question

I have the following HTML.

<ul class="static">
    <li class="static dynamic-children">
        <a class="static dynamic-children menu-item" href="test.php" tabindex="0">
            <span class="additional-background">
                <span class="menu-item-text">Link</span>
            </span>
        </a>
        <ul class="dynamic">
        </ul>
     </li>
</ul>

As you can see when I click on "Link" then it takes me to "test.php" page. I want this "Link" to be unclickable like you place "#" for e.g. href="#"

Is it possible to do this using CSS or Jquery? Can't use Javascript's document.getElementById because there is no ID defined for this element.

score 2 · Accepted Answer · answered Dec 22 '13 at 10:14

Different options:

$('a[href="test.php"]').click(function(){
    return false;
});

or

$("static dynamic-children a.menu-item").click(function(){
    return false;
});

You can also use event.preventDefault() which prevents the default/expected behaviour of a link. Use like:

$("static dynamic-children a.menu-item").click(function(event){
    event.preventDefault();
});

score 1 · Answer 2 · answered Dec 22 '13 at 10:13

1

Write return false

$("a.menu-item").click(function(){
    return false;
});

OR

e.preventDefault()

$("a.menu-item").click(function(e){
    e.preventDefault();
});

answered Dec 22 '13 at 10:13

codingrose

15,563
11
39
58

score 1 · Answer 3 · edited Dec 22 '13 at 10:15

1

You can cancel the link behavior by firing preventDefault() on the click of this link:

$("a.menu-item").click(function(evt){
    evt.preventDefault();
});

edited Dec 22 '13 at 10:15

Maxime Lorant

34,607
19
87
97

answered Dec 22 '13 at 10:14

dcodesmith

9,590
4
36
40

1

Don't forget to add some explanation @dcodesmith. A bunch of code pasted from nowhere isn't pedagogical. – Maxime Lorant Dec 22 '13 at 10:16
@MaximeLorant You beat me to it, I wanted to post the solution and then elaborate on it. Cheers ; – dcodesmith Dec 22 '13 at 10:18

How to make link unclickable using CSS or jquery?

3 Answers3

Linked