如何使用内部 href 使 div 可点击，但不覆盖其他内部 href

发布于 2024-08-21 20:48:11 字数 1152 浏览 3 评论 0原文

我有一个带有 3 个内部 href 的 div。我需要使 div 可点击并让它继承内部 href 之一。不是问题...但是这会导致 JS 覆盖 div 内的其他链接，即我没有为父 div 继承的链接。这是我的代码：

<script>
$(document).ready(function(){   
$("#Products div.product").click(function(){
    window.location=$(this).find("a.product_link").attr("href"); return false;
    }
);
</script>
<div class="product">
<div class="icon">
<a href="/training/programme/fire-awareness-in-the-workplace" class="product_link" title="Fire Awareness in the Workplace"><img src="/assets/public/btn_FA_icon.gif" alt="image" width="70" height="70" /></a>
</div>
<div class="summary">
<h2>Fire Awareness in the Workplace</h2>
<p>All staff must complete fire awareness training - this excellent programme is all you need to train your employees at minimum cost and disruption.</p>
</div>
<div class="btns">
<a href="/purchase/single/FA" class="single" title="Buy Now...">Buy Now...</a>
<a href="/training/preview/FA" class="single" title="Free Trial...">Free Trial...</a>
</div>
</div>

那么...有什么想法吗？ :)

原文

I have a div with 3 internal hrefs. I need to make the div clickable and have it inherit one of the internal hrefs. Not a problem... however this then causes the JS to overide the other links inside the div, the ones I'm not inheriting for the parent div. Here's my code:

<script>
$(document).ready(function(){   
$("#Products div.product").click(function(){
    window.location=$(this).find("a.product_link").attr("href"); return false;
    }
);
</script>
<div class="product">
<div class="icon">
<a href="/training/programme/fire-awareness-in-the-workplace" class="product_link" title="Fire Awareness in the Workplace"><img src="/assets/public/btn_FA_icon.gif" alt="image" width="70" height="70" /></a>
</div>
<div class="summary">
<h2>Fire Awareness in the Workplace</h2>
<p>All staff must complete fire awareness training - this excellent programme is all you need to train your employees at minimum cost and disruption.</p>
</div>
<div class="btns">
<a href="/purchase/single/FA" class="single" title="Buy Now...">Buy Now...</a>
<a href="/training/preview/FA" class="single" title="Free Trial...">Free Trial...</a>
</div>
</div>

So... any ideas? :)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

云淡月浅 2024-08-28 20:48:11

尝试从锚点终止事件传播

$("a.single").click(function(event){
  event.stopPropagation();
});

Try to kill propagation of the event from your anchors

$("a.single").click(function(event){
  event.stopPropagation();
});

回复收藏 0 原文

小伙你站住 2024-08-28 20:48:11

尝试将 div 的 z-index 设置为 999，并将 div 中链接的 z-index 设置为 -1。

.btns{z-index:999;}
.btns a{z-index:-1;}

这会将 btns div 下沉到元素堆栈的底部，同时将链接提升到顶部。这样，理论上，如果您在链接的元素边界内单击，您将触发其单击事件，而单击 div 中的其他任何位置，您将触发其单击事件。请告诉我这是否有效。

try setting z-index of the div to 999, and setting z-index of links in the div to -1.

.btns{z-index:999;}
.btns a{z-index:-1;}

This will sink btns div to the bottom of element stack, while raising links to the top. This way, in theory, if you click within element boundaries of a link, you will trigger its click event, while clicking anywhere else in the div, you will trigger its click event. Please let me know whether this works.

回复收藏 0 原文

~没有更多了~