javascript - 2 个链接合一 anchor

Question

我有一个<ul><li><a>结构非常具体，有 9 个元素，分为 3 列。我想添加另一个项目而不创建第四列，因此我正在考虑的解决方案是在一个“槽”中包含 2 个链接。

问题在于<ul><li><a>结构如下:添加 <a>将自动创建另一个插槽(垂直)。

我希望不必从头开始重新创建整个结构来适应这一变化，所以我试图想出一个办法。

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

我尝试这样做:

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

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

Answer 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";
    
  }
}

<a href="#" onclick="goToLink(event, this);">link1 <span onclick="goToLink(event, this);">link2</span></a>

当单击第二个链接时，stopPropagation() 调用会阻止加载第一个链接。