首页 文章

如果单击,则将href文本添加到链接

提问于
浏览
3

我有一个包含多个链接的页面 . 某些链接指向相同的URL . 我想在单击其中一个重复链接时将文本(可链接的href文本)添加到单击(或悬停?)的链接 .

到目前为止,我似乎只能添加第一个链接的文本而不是我点击的文本 .

我已经尝试了一些东西,但我仍然在学习JavaScript(我羡慕你们所有人)而且我害怕我一直在努力搞砸它 . 我知道我可能不得不使用悬停或以某种方式改变 getElementsByTagName("a")[0]... 任何帮助将不胜感激!

<p>
<a href="http://www.1.com" target="_blank">dog</a>
<a href="http://www.2.com" target="_blank">cat</a>
<a href="http://www.3.com" target="_blank">bird</a>
<a href="http://www.3.com" target="_blank">frog</a>
</p>

使用Javascript:

$var anchors = document.querySelectorAll('a[href$="http://www.3.com"]');
Array.prototype.forEach.call(anchors, function (element, index) {
    element.href = document.getElementsByTagName("a")[0].innerHTML;
});

Example 当我点击链接"dog"时,我想打开一个新的浏览器标签/窗口,其URL为“http://www.1.com

当我点击链接"cat"时,我想打开一个新的浏览器标签/窗口,其URL为“http://www.2.com

当我点击“鸟”链接时,我想打开一个新的浏览器标签/窗口,其URL为“bird”

当我点击“青蛙”链接时,我想打开一个新的浏览器标签/窗口,其URL为“frog”

所以任何链接都有“http://www.3.com " as the href will ignore the " http://www.3.com”,而是打开一个新的浏览器选项卡/窗口,其中包含刚刚单击的文本 .

此外,我无法在链接/ HTML中添加ID,类,脚本等,因此我必须弄清楚如何将所有这些作为JS引用href而不是HTML内部 .

3 回答

  • 2

    不确定这是否正是你所要求的,但THIS DEMO是一个例子,我将href并将其附加到文本中 .

    HTML

    <a href='#' onclick='change(this)'>link one</a>
    <a href='#' onclick='change(this)'>link two</a>
    <a href='#' onclick='change(this)'>link three</a>
    <a href='#' onclick='change(this)'>link four</a>
    

    CSS

    a {
        float: left;
        clear: both;
    }
    

    JavaScript的

    function change(variable) {
        variable.innerHTML = variable.innerHTML + variable.href;
    }
    
  • 0

    我的一位同事找到了解决方案 . 感谢大家的帮助 .

    Option 1:

    替换我原来的JS的一部分:

    “document.getElementsByTagName("a")[0] .innerHTML”

    有:

    “window.location的”

    要么

    Option 2: jsfiddle

    替换我原来的所有JS:

    $var anchors = document.querySelectorAll('a[href$="http://www.3.com"]');
    Array.prototype.forEach.call(anchors, function (element, index) {
    element.href = document.getElementsByTagName("a")[0].innerHTML;
    });
    

    附:

    var anchors = $('a[href$="http://www.3.com"]');
    $.each(anchors, function (index, element) {
    $(element).attr('href',$(element).text());
    });
    
  • 0

    试试这样:

    <a href="" onClick="javascript:this.innerHTML = 'ChangedClickMe'">ClickMe</a>
    

    JSFIDDLE DEMO

相关问题