一个锚点中的 2 个链接答案

【问题标题】：2 Links in One Anchor一个锚点中的 2 个链接
【发布时间】：2017-05-01 18:24:55
【问题描述】：

我有一个<ul><li><a> 结构，它的风格非常特别，有 9 个元素分隔在 3 列中。我想在不创建第 4 列的情况下添加另一个项目，因此我正在考虑的解决方案是在一个“插槽”中有 2 个链接。

问题在于<ul><li><a> 的结构使得添加<a> 将自动创建另一个插槽（垂直）。

我希望不必为了适应这种变化而从头开始重新创建整个结构，所以我试图想出一个技巧。

我知道这很丑陋而且很奇怪，但它确实造成了一个有趣的问题至少......

我试过了：

<a href="link1.html">link1 <span onclick="location.href ='link2.html'">link2</span></a>

但这不起作用——我也尝试过使用 jQuery，但这也不起作用。这里有解决方法/hack 还是我必须重组整个列表？

【问题讨论】：

你能举一个完整的例子来说明你想要达到的目标吗？
你需要stop propagation的点击到父锚元素。不幸的是，没有简单的方法可以通过 onclick 属性来做到这一点。
@Blazemonger 是的。 <span onclick="myFunction(event);"> 并在函数内部调用 event.stopPropagation()。
@mhodges 我并不清楚。我的意思是没有使用单独的 <script> 函数，但是是的，应该可以。
@SamYoungNY 您必须在 onclick 属性中将其命名为 event。它不知道ev是什么

标签： javascript jquery html html-lists anchor

【解决方案1】：

这是让a 和span 元素将您带到不同链接的一种快速简便的方法。（我注释掉了实际的链接并改用了警报，因为这些链接无论如何都不会加载到框架中。）

function goToLink(e, that) {
  e.stopPropagation();
  if (that.tagName.toUpperCase() == "A") {
    // if anchor was clicked
    alert("1st link");
    //window.location.href = "http://www.google.com";
  }
  else {
    // if span was clicked
    alert("2nd link");
    //window.location.href = "http://www.yahoo.com";
    
  }
}

&lt;a href="#" onclick="goToLink(event, this);"&gt;link1 &lt;span onclick="goToLink(event, this);"&gt;link2&lt;/span&gt;&lt;/a&gt;

stopPropagation() 调用可防止在单击第二个链接时加载第一个链接。

【讨论】：

【解决方案2】：

$('#link2').click(function() {
  window.setTimeout(function() {
    location.href = $('#link2').attr('data-href')
  }, 10)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="link1.html">link1 <span id='link2' data-href="link2.html">link2</span></a>

【讨论】：

您应该使用准确代表原始问题的代码。
@Blazemonger 未经我同意就更新您的编辑真的很奇怪 :)
可能是我问错了问题。我以为他想要两个href ..这就是为什么他添加了一个额外的span。他可以将其添加为另一个属性，可能是href2 到同一个a 标签
@MrLister 好的.. 但是将href 添加到 span 有什么意义？所以我提出它类似于将另一个属性href2添加到a标签