jQuery: Disable a link

The method below is quite commonly used.  Now if you click on yahoo, you will not be brought to the web site.

<!DOCTYPE html>
<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <title>Disable A Link</title>      
        <script>
            $(function () {
                $('a').click(function (e) {
                    e.preventDefault();
                });
            })
        </script>
    </head>
    <body>
        <a href="http://yahoo.com">Yahoo</a>
    </body>
</html>

button

jQuery Selectors: Matches the end of the attribute value E[attr$=value]

This entry is part 13 of 33 in the series jQuery Selectors

E[attr$=value]

Matches any element E whose attribute attr ends in value.

In other words, the value matches the end of the attribute value.

In the example below, we use preventdefault function to prevent the default event, which is to follow the link, to happen.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>codecrawl.com</title>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
    <script>
        $(function () {
            $("a[href$='.com']").click(function (event) {
                event.preventDefault();
            });
        });
    </script>

</head>
<body>
<a href='http://google.com'>This is to google</a>
<br>
<a href='http://yahoo.com'>This is to yahoo</a>
</body>
</html>

If we have an element with a class name topMenu, we can also match it with class$=Menu.