[英]Make DIV clickable with 2 or more links
I have some difficulties with jQuery.我在使用 jQuery 时遇到了一些困难。 I need to ma div
or section
clickable (add link to block element) and I already implemented some code我需要 ma div
或section
可点击(添加块元素的链接)并且我已经实现了一些代码
$(document).ready(function() {
$(".clickable").click(function(){
window.location=$(this).find("a.slide-link").attr("href");
return false;
});
});
But when the block has 2 or more links - links in this block don't work correctly.但是当块有 2 个或更多链接时 - 此块中的链接无法正常工作。 Always redirect to a.slide-link
url.始终重定向到a.slide-link
url。
How I can solve this issue?我该如何解决这个问题? Thanks!谢谢!
Update更新
<section class="clickable">
<div>
<div class="description">
<ul>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum <a href="http://url1.com">here</a></li>
</ul>
</div>
<a class="slide-link" href="http://url2.com">URL2</a>
</div>
</section>
Initial answer for initial question初始问题的初始答案
In case of multiple match, $(this).find("a.slide-link") gives array of nodes, hence, .attr does not work.在多个匹配的情况下, $(this).find("a.slide-link") 给出节点数组,因此, .attr不起作用。
If you want to redirect to the 1st link then update your code to如果您想重定向到第一个链接,请将您的代码更新为
$($(this).find("a.slide-link")[0])
Updated answer for updated question更新问题的更新答案
Your anchor within the section will not work because of event bubbling.由于事件冒泡,您在该部分中的锚点将不起作用。 For reference - http://www.w3schools.com/jsref/event_bubbles.asp供参考 - http://www.w3schools.com/jsref/event_bubbles.asp
What you have to do is stop event to bubble.你要做的就是阻止事件冒泡。 For that add this in your js为此,在您的 js 中添加它
$(".clickable a").click(function(event){
event.stopPropagation();
});
If it's just the links you want to work within the section, but not clicking the section itself, then you can use the following:如果它只是您想要在该部分中工作的链接,而不是单击该部分本身,那么您可以使用以下内容:
$(document).ready(function() {
$(".clickable a.slide-link").click(function(){
window.location=$(this).attr("href");
return false;
});
});
Though only if you're planning on doing something other than simply going to that address, in which case the above code is the same as having no code..虽然只有当你打算做一些事情而不是简单地去那个地址时,在这种情况下,上面的代码与没有代码是一样的..
If you want the outer section to be a link itself, you'd be better using an <a>
tag for that too, and setting it to display: block
.如果您希望外部部分成为链接本身,您最好也使用<a>
标签,并将其设置为display: block
。 You can't nest anchor tags within other anchor tags for obvious reasons.出于显而易见的原因,您不能在其他锚标记中嵌套锚标记。
I found answer我找到了答案
$(".clickable").click(function( event ) {
var target = $( event.target );
if ( !target.is( "a" ) ) {
window.location=$(this).data("link");
}
}
You can select an anchor by its href value $("a[href='www.myurl.com'")
您可以通过其 href 值$("a[href='www.myurl.com'")
选择一个锚点
Read more about the selectors here.在此处阅读有关选择器的更多信息。 javascript uses the same selectors as regular CSS. javascript 使用与常规 CSS 相同的选择器。 given the browser supports the selector.鉴于浏览器支持选择器。 http://www.w3schools.com/cssref/css_selectors.asp http://www.w3schools.com/cssref/css_selectors.asp
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.