Cách thay đổi thẻ <a> trên nút nhấp qua javascript

126

Làm cách nào để thay đổi hrefgiá trị thuộc tính của <a/>thẻ thông qua Javascript khi nhấp vào nút?

<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>

javascript href attr

— Châu
nguồn

Cách tiếp cận ra lệnh không sử dụng liên kết theo cách này. Tại đây: xkr.us/js/links

— Tư vấn miễn phí

176

Không có a href, nhấp chuột sẽ tải lại trang hiện tại, vì vậy bạn cần một cái gì đó như thế này:

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

Hoặc ngăn cuộn như thế này:

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

Hoặc return falsetrong f1chức năng của bạn và:

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

.... hoặc, cách không phô trương:

<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>

— Nick Craver
nguồn

34

Chính xác những gì Nick Carver đã làm ở đó nhưng tôi nghĩ sẽ tốt nhất nếu sử dụng phương thức DOM setAttribution.

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

Đó là một dòng mã bổ sung nhưng thấy nó có cấu trúc tốt hơn.

— jakobhans
nguồn

8

IMO không có nhu cầu ở đây, đây đã là một thuộc tính DOM mãi mãi, .hrefhoạt động trong tất cả các trình duyệt ... ví dụ bạn sẽ sử dụng .getAttribute("id")thay vì chỉ .id? :)

— Nick Craver

3

Bạn nói đúng, nó không làm gì đặc biệt hay khác biệt, nó chỉ là cấu trúc khôn ngoan. Tôi thích có tất cả các chức năng DOM của mình theo cách này để gỡ lỗi / đánh giá sau này: Tôi dễ dàng hơn để xem chức năng này đang làm gì với các phương thức này. Rõ ràng câu trả lời của bạn là đúng về tiền :)

— jakobhans

7

xóa hrefthuộc tính:

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

nếu kiểu liên kết là quan trọng thì:

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

— atlavis
nguồn

1

một <a>thẻ không có hrefthuộc tính? gì? tại sao?

— Shikiryu

1

Rời khỏi href sẽ thay đổi phong cách và hành vi của nó. Sau đó, nó hoạt động như một mỏ neo thay vì một liên kết.

— Cobra_Fast

1

Cảm ơn đã trả lời các bạn đang thực sự giúp tôi.

— Chauhan

1

no href làm cho nó trở thành một mỏ neo, nhấp vào chuyển đổi thành một liên kết, khá bình thường

— Tư vấn miễn phí

1

<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>

— người dùng325593
nguồn

0

Để có một liên kết thay đổi động khi nhấp vào nó:

<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
nguồn

0

Đây là của tôi về nó. Tôi cần tạo URL bằng cách thu thập giá trị từ hộp văn bản, khi người dùng nhấn nút Gửi.

<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>

Mở rộng đoạn trích

— Arindam Roychowdhury
nguồn

-1

Tôi biết bài viết cũ của nó. Tuy nhiên, nó có thể giúp một số người.

Thay vì gắn thẻ, nếu có thể bạn cũng có thể làm điều này.

 <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>`

Bất kỳ ý kiến về điều này?

— 4u.
nguồn