我有一个锚标记,我在其中通过jQuery追加一些div。我希望父<a>
标记的'超链接'效果不应出现在附加的子元素中。
我们如何使用jQuery或其他方式实现这一目标。
以下是我想要的 fiddle 。
更新 大多数答案都说明了如何删除点击效果。是不是可以阻止子元素的锚标记的每个默认行为?
答案 0 :(得分:3)
确定。这是一些示例HTML
<a href="google.com" id="first">
<div>
<p>Blah</p>
</div>
<div>
<p>Blah</p>
</div>
<div>
<p>Blah</p>
</div>
</a>
<a href="google.com" id="second">
<div>
<p>Blah 2</p>
</div>
<div>
<p>Blah 2</p>
</div>
<div>
<p>Blah 2</p>
</div>
</a>
此CSS将删除下划线,更改字体颜色和光标
div{
display: inline;
}
#second{
text-decoration: none;
color: #000;
cursor: default;
}
jquery从子项中删除click事件
$('#second').children().each(function(){
$(this).click(function(e){
e.preventDefault();
});
});
更新:除了您的评论之外,您要做的是复杂而且有点奇怪。你说出于某种原因你必须将div包装在achor标签中,但不要让它们继承属性。你将不得不做出一些权衡。诀窍是从a标签中删除'href'。你不必为此编写任何jQuery / javascript。事实上,你甚至不需要任何CSS。基本上,从上面删除所有的css和jquery并从第二个删除href。
<强> FIDDLE 强>
答案 1 :(得分:0)
您可以使用:first-child Selector。看http://api.jquery.com/first-child-selector/
答案 2 :(得分:0)
您可以使用CSS删除下划线:
a div {
text-decoration: none
}
要阻止锚点跟随其href
属性,您需要将处理程序绑定到返回false的click
事件。在jQuery中你可以这样实现:
$('a div').on('click', function() {
// do whatever you want to do here
return false;
});
在您提供jsfiddle之后,我编辑了选择器(添加了div
)。还有,还有一件事。根据你的小提琴我假设你不想用“div”包裹“Something”。
它应该如下所示:jsfiddle
答案 3 :(得分:0)
您应该向锚点添加一个eventlistener,并为prevent添加默认行为:
document.getElementsByTagName("a")[0].addEventListener("click", function(e){
if(e.target.tagName=="DIV") e.preventDefault();
});