Question

我有一个包含在html <a>标记中的div，因此点击该框中的任意位置都会将用户引导到新位置。

我想在内添加一个按钮，该按钮位于其他位置（比封装div的链接更具体的位置。

目前，在我的div中添加第二个<a>标记将关闭原始<a>，这是有意义的，因为我猜这些标记无法嵌套。我怎样才能完成这个'嵌套'链接问题？

更新

我需要构建一个rel属性，因为它会切换外部div中的扩展部分。

我目前的代码：

<a class="toggle" rel="toggle[<%= "#{user.id}" -%>]"> <div> <a>...</a> </div> </a> <div class="expand_me" id=<%= "{user.id}" -%>> ... </div>

我一直试图让你建议的javascript工作，但事实并非如此。我该如何让这个具体案例发挥作用？我为一开始不包含这些信息而道歉 - 我不知道使用href代替所需的rel来解决问题之间存在真正的区别。

Answer 1

你可以在div中添加一个onClick处理程序，并可以将链接安全地放在div中。

<html>
<head>
 <script>
   function clicked(){
     window.location.href="link2";
   }
 </script>
 <style>
 body{
   width:50%;
   margin-left:auto;
   margin-right:auto;
 }
 </style>
</head>
<div width="100px" height="100px" style="background-color:red" onclick="javascript:clicked()">
 <a href="link">test</a>
</div>

</html>

Answer 2

不仅<A>元素不能嵌套，而且（我相信）内容必须是内联的，因此DIV不应该用于链接。我在外面的DIV中使用onclick，例如：

<div id="myparentdiv" onclick="alert('go somewhere')">
hi bla bla blah
<br> hi <br>
<a onclick="document.getElementById('myparentdiv').onclick=undefined;return true;" 
href="http://stackoverflow.com/">go to st</a>
</div>

显然，您应该使用重定向替换alert调用。内部onclick是为了避免事件传播。

Answer 3

这个问题可以通过jQuery解决：

<div class="linked">
    <a href="/somewhere">Text</a>

    <div class="linked">
        <a href="/somewhereElse">Text2</a>
    </div>
</div>

<script type="text/javascript">
    $("a").each(function(){
      var aTag = this;
      $(aTag).ancestor('.linked').click(function(){
          window.location.href = $(aTag).attr('href');
      });
    });
</script>

这为您提供了最好的世界：语义HTML，以及标签行为自动传播到最近的“链接”祖先。它还可以方便地进行嵌套。

Answer 4

我同意其他用户的建议。标记只能是内联元素，因此不能包装任何其他元素。解决方案是使用onclick事件来处理用户单击div标签的情况。在div标签内，您可以放置其他可以指向其他位置的标签。

然而，这种方法有一个缺陷，即搜索引擎无法在onclick事件指向的任何地方抓取链接。解决此问题的一种方法是在页面上设置另一个显式链接，指向与onclick相同的链接。这是一个例子：

<div onclick="document.location.href = 'link1.html'">
    <p>Content would go here...</p>
    <a href="link1.html">Click here or anywhere near me to go location 1</a>
    <a href="link2.html">Click here to go to location 2</a>
</div>

注意：第一个标签不必在div标签内。

这将允许用户点击div内部或第一个标签上的链接转到link1.html，另一个标签将转到link2.html。这也将允许搜索抓取工具为两个链接编制索引。

我还建议将一些CSS应用到div标签，并将onclick javascript代码包装到一个函数中，以使代码更易于管理，但这不是必需的。

希望这有帮助。

Answer 5

如果浏览器兼容性不是最重要重要性，那么您应该看看这个纯CSS解决方案。通过使用AP锚点和z-index属性，您可以拥有一个与外部div一样大的锚点，该锚点位于所有其他内容之上。

以最简单的形式，它可能看起来像：

<div id="about_us">
    <h3>About Us</h3>
    <p>This website is the culmination of several months of intensive research
        and collaboration. </p>
    <p>We painstakingly gathered data and are presenting it to the world here. </p>
    <a href="#">Read More</a>
</div>

CSS：

#about_us {
    position: relative;
}

#about_us a {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 100;
    text-indent: -9999px;
}

这将为您提供与父div相同大小的锚点，并且位于所有内容之上，并隐藏链接文本，使其不会显示在左上角div。

有关更复杂的示例，请参阅：http://jsfiddle.net/545xy/2/

嵌套/分层html链接<a></a>

更新

5 个答案: