如何通过JavaScript在按钮点击时更改<a>标签的href？

Question

如何通过JavaScript在按钮点击时更改<a>标签的href？

174

如何在点击按钮时通过JavaScript更改<a/>标签的href属性值？

<script type="text/javascript">
  function f1()
  {
    document.getElementById("abc").href="xyz.php"; 
  }
</script>

<a href="" id="abc">jhg</a>
<a href="" id="" onclick="f1()">jhhghj</a>

- Chauhan

无障碍之道要求不要以这种方式使用链接。在这里：http://xkr.us/js/links - Free Consulting

8个回答

54

就像Nick Carver所做的那样，但我认为最好使用DOM的setAttribute方法。

<script type="text/javascript">
    document.getElementById("myLink").onclick = function() {
        var link = document.getElementById("abc");
        link.setAttribute("href", "xyz.php");
        return false;
    }
</script>

多写一行代码，但从结构上来说更好。

- jakobhans

11

在这里我认为没有必要，这一直是一个DOM属性，.href在所有浏览器中都可以使用...例如，你会使用.getAttribute("id")而不是直接使用.id吗？ :) - Nick Craver

4

没错，它并没有做任何特别或不同的事情，只是在结构上有所不同。我喜欢以这种方式拥有所有的DOM函数，以便以后进行调试和审查：这样使用方法更容易让我看到函数正在做什么。显然你的答案完全正确 :) - jakobhans

谢谢！今天仍然有效！ - mick1996

7

移除 href 属性：

<a id="" onclick="f1()">jhhghj</a>

如果链接样式很重要，则应采取以下措施：

<a href="javascript:void(f1())">jhhghj</a>

- atlavis

1

一个没有href属性的<a>标签？什么？为什么？ - Shikiryu

1

省略 href 属性会改变链接的样式和行为。此时它将作为锚点而非链接来使用。 - Cobra_Fast

1

没有 href 就不是锚点，点击会转换为链接，这很正常。 - Free Consulting

6

以下是我的建议。当用户按下提交按钮时，我需要通过收集文本框中的值来创建URL。

<html>
<body>

Hi everyone

<p id="result"></p>

<textarea cols="40" id="SearchText" rows="2"></textarea>

<button onclick="myFunction()" type="button">Submit!</button>

<script>
function myFunction() {
    var result = document.getElementById("SearchText").value;
 document.getElementById("result").innerHTML = result;
 document.getElementById("abc").href="http://arindam31.pythonanywhere.com/hello/" + result;
}  
</script>


<a href="#" id="abc">abc</a>

</body>
<html>

- Arindam Roychowdhury

2

<a href="#" id="a" onclick="ChangeHref()">1.Change 2.Go</a>

<script>
function ChangeHref(){
document.getElementById("a").setAttribute("onclick", "location.href='http://religiasatanista.ro'");
}
</script>

- user3325593

2

<script type="text/javascript">
  function f1(mHref)
  {
    document.getElementById("abc").href=mHref; 
  }
</script>

<a href="" id="abc">jhg</a>
<button onclick="f1("dynamicHref")">Change HREF</button>

Just give the dynamic HREF in Paramters

- Abhishek K

1

点击链接时动态更改链接：

<input type="text" id="emailOfBookCustomer" style="direction:RTL;"></input>
        <a 
         onclick="this.href='<%= request.getContextPath() %>/Jahanpay/forwardTo.jsp?handle=<%= handle %>&Email=' + document.getElementById('emailOfBookCustomer').value;" href=''>
    A dynamic link 
            </a>

- Mohsen Abasi

-1

我知道这篇文章有点旧了，但它可能会对某些人有所帮助。

如果可能的话，您可以使用此方法而不是标签。

 <script type="text/javascript">
        function IsItWorking() {
          // Do your stuff here ...
            alert("YES, It Works...!!!");
        }
    </script>   

    `<asp:HyperLinkID="Link1"NavigateUrl="javascript:IsItWorking();"`            `runat="server">IsItWorking?</asp:HyperLink>`

对此有任何评论吗？

- 4u.Ans

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nick Craver · Accepted Answer

如果没有 href, 点击将重新加载当前页面，所以你需要像这样：

<a href="#" onclick="f1()">jhhghj</a>

或者像这样禁止滚动：

<a href="#" onclick="f1(); return false;">jhhghj</a>

或在您的f1函数中使用return false：

<a href="#" onclick="return f1();">jhhghj</a>

....或者，不显眼的方式：

<a href="#" id="abc">jhg</a>
<a href="#" id="myLink">jhhghj</a>

<script type="text/javascript">
  document.getElementById("myLink").onclick = function() {
    document.getElementById("abc").href="xyz.php"; 
    return false;
  };
</script>