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?
无论如何使用特定的.parent类来定位标签并使它们不可点击？
5 个解决方案
#1
2
Use:
使用：
$(function () {
$('a.parent').on("click", function (e) {
e.preventDefault();
});
});
#2
8
If anyone interested in Pure CSS solution (As this question is tagged as CSS) than you can use pointer-events: none;
如果有人对Pure CSS解决方案感兴趣（因为这个问题被标记为CSS），那么你可以使用pointer-events：none;
a[href="parent"] {
cursor: default;
pointer-events: none;
}
演示
As far as support goes
至于支持
Credits: Mozilla Developer Network
致谢：Mozilla开发者网络
#3
1
If you want to avoid using the jQuery library, it's just as easy without it:
如果你想避免使用jQuery库，没有它就会很容易：
var disabled = document.querySelector('.parent');
disabled.addEventListener('click', function(e) {e.preventDefault();}, false);
#4
0
Another pure CSS option would be to overlay the link with an absolutely positioned "cover":
另一个纯CSS选项是用绝对定位的“封面”覆盖链接：
<!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>
#5
0
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:
您可以在主体上放置一个侦听器，而不是每个.parent上的侦听器。以下内容适用于所有正在使用的浏览器，无需任何库支持：
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.
您还可以通过将类传递给函数并从中构建正则表达式来使类动态化。
#1
2
Use:
使用：
$(function () {
$('a.parent').on("click", function (e) {
e.preventDefault();
});
});
#2
8
If anyone interested in Pure CSS solution (As this question is tagged as CSS) than you can use pointer-events: none;
如果有人对Pure CSS解决方案感兴趣（因为这个问题被标记为CSS），那么你可以使用pointer-events：none;
a[href="parent"] {
cursor: default;
pointer-events: none;
}
演示
As far as support goes
至于支持
Credits: Mozilla Developer Network
致谢：Mozilla开发者网络
#3
1
If you want to avoid using the jQuery library, it's just as easy without it:
如果你想避免使用jQuery库，没有它就会很容易：
var disabled = document.querySelector('.parent');
disabled.addEventListener('click', function(e) {e.preventDefault();}, false);
#4
0
Another pure CSS option would be to overlay the link with an absolutely positioned "cover":
另一个纯CSS选项是用绝对定位的“封面”覆盖链接：
<!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>
#5
0
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:
您可以在主体上放置一个侦听器，而不是每个.parent上的侦听器。以下内容适用于所有正在使用的浏览器，无需任何库支持：
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.
您还可以通过将类传递给函数并从中构建正则表达式来使类动态化。