How do I make <a> tags with a class unclickable?
Question
I have some parent nav items with children and I don't need the parent items to be clickable.
They look like this:
<a href="parent">Parent Item</a>
Is there anyway to target the <a> tags with the specific class of .parent and make them unclickable?
5 answers
solution1
8 2014-01-29 06:53:21
If anyone interested in Pure CSS solution (As this question is tagged as CSS) than you can use pointer-events: none;
a[href="parent"] {
cursor: default;
pointer-events: none;
}
As far as support goes
Credits: Mozilla Developer Network
solution2
2 ACCPTED 2014-01-29 06:52:03
Use:
$(function () {
$('a.parent').on("click", function (e) {
e.preventDefault();
});
});
solution3
1 2014-01-29 07:24:13
If you want to avoid using the jQuery library, it's just as easy without it:
var disabled = document.querySelector('.parent');
disabled.addEventListener('click', function(e) {e.preventDefault();}, false);
solution4
0 2014-01-29 07:31:04
Another pure CSS option would be to overlay the link with an absolutely positioned "cover":
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
.parent {position: relative; z-index: -1;}
.parent:after {content: ""; position: absolute; top:0; right: 0; bottom: 0; left: 0;}
</style>
</head>
<body>
<a href="http://google.com" class="parent">Disabled Link</a>
<a href="http://google.com">Normal Link</a>
</body>
</html>
solution5
0 2014-01-29 08:38:15
Instead of a listener on every .parent , you can put a single listener on the body. The following will work in every browser in use without any library support:
function stopClickOnParentClass(evt) {
var el = evt.target || evt.srcElement;
if (/(^|\s)parent(\s|$)/.test(el.className)) {
evt.preventDefault();
return false;
}
}
then:
<body onclick="stopClickOnParent(event);" …>
You could also make the class dynamic by passing it to the function and building the regular expression from it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.