How to make link unclickable using CSS or jquery? [duplicate]


Tags: javascript,jquery,html,css

Problem :

This question already has an answer here:

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.



Solution :

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();
});

    CSS Howto..

    How to create fluid trapezoid image with css?

    How to include multiple Css Class in ActionLink?

    How to make transparent arrow? [duplicate]

    How can i have CSS3 animating menu like followbubble.com

    How to adjust contents to automatically fit size of the screen?

    How to Drop 2 nested shadows On 2 Divisions in CSS? [closed]

    How to align text in line with icons?

    How can i make the picture zoom in with css when my picture is 100% width in a bootstrap column?

    How to edit .css file from html via jquery

    How do you right-align text into a column?

    How can I select this element?

    css + how to have cells with a border and cells without a border

    How to place two divs next to each other -HTML/CSS

    How to change cursor on the NextGen Gallery Slideshow in Wordpress

    How to adjust font awesome down arrow via css

    how to put image on button? (css)

    How do I inspect CSS pseudo classes with firebug?

    How to stop Navigation bar list from changing position?

    How did infusion.com skew the elements? The CSS file does not seem to have skewing in it and the menu is also skewed

    How to apply a responsive CSS height to an element using min/max-height and height?

    How to center bootstrap navba-nav on scroll when fixed?

    how to remove the css given and get only the data from database using php

    CSS and HTML: How to create an Expanding DIV On Click?

    How to make groups of divs the same width using only CSS?

    How to make top/bottom borders appear ontop of left/right borders crossbrowser css

    How to create header numbers with CSS

    How to draw mobile device edge using CSS?

    CSS how to postiton div outside main container without it moving over the container on window re-size? [closed]

    How to remove all input outline?

    How can I make this button image appear in Firefox 2.0 the same as it does in IE7?