Question

i have this javascript code:

<script>
  $(".ucp_link").click(function() {
    window.location = $(this).find("a").attr("href"); 
    return true;
  });
</script>

and this html code:

<div class="ucp_menu"><div class="ucp_inner"><h4>all item</h4><div  class="ucp_link"><a href="p.php?p=">item1</a></div><div class="ucp_link">item  2</div></div></div>

I want to make div with link clickable but not the one without link.

Answer 1

使用ucp_link选择器

检查link元素中是否包含:has()元素

$(".ucp_link:has(a)").click(function() {
  window.location = $(this).find("a").attr("href");
  return true;
});

<div class="ucp_menu">
  <div class="ucp_inner">
    <h4>all item</h4>
    <div class="ucp_link">
      <a href="p.php?p=">item1</a>
    </div>
    <div class="ucp_link">item 2</div>
  </div>
</div>

Answer 2

我认为包装div是样式化的，这就是你想要这样做的原因。

您实际上并不需要javascript，而是可以使用css将链接覆盖div。

例如：

.ucp_link {
  position: relative;
}
.ucp_link a {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

如果包装器div没有样式（没有填充等），您只需要：

.ucp_link a {
  display: block;
}

使用<a> clickable and div with no </a> <a> non clickable

2 个答案: