Làm cách nào bạn có thể thay đổi href cho một siêu liên kết bằng jQuery?

Sử dụng

$("a").attr("href", "http://www.google.com/")

sẽ sửa đổi href của tất cả các siêu liên kết để trỏ đến Google. Bạn có thể muốn một bộ chọn tinh tế hơn một chút mặc dù. Ví dụ: nếu bạn có kết hợp các thẻ neo nguồn liên kết (siêu liên kết) và mục tiêu liên kết (còn gọi là "neo"):

<a name="MyLinks"></a>
<a href="http://www.codeproject.com/">The CodeProject</a>

... Sau đó, bạn có thể không muốn vô tình thêm hrefthuộc tính cho chúng. Để an toàn sau đó, chúng tôi có thể chỉ định rằng bộ chọn của chúng tôi sẽ chỉ khớp <a>các thẻ với hrefthuộc tính hiện có :

$("a[href]") //...

Tất nhiên, có lẽ bạn sẽ có một cái gì đó thú vị hơn trong tâm trí. Nếu bạn muốn khớp một neo với một cụ thể hiện có href, bạn có thể sử dụng một cái gì đó như thế này:

$("a[href='http://www.google.com/']").attr('href', 'http://www.live.com/')

Điều này sẽ tìm thấy các liên kết trong đó hrefchính xác khớp với chuỗi http://www.google.com/. Một tác vụ liên quan hơn có thể phù hợp, sau đó chỉ cập nhật một phần của href:

$("a[href^='http://stackoverflow.com']")
   .each(function()
   { 
      this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/, 
         "http://stackoverflow.com");
   });

Phần đầu tiên chỉ chọn các liên kết nơi href bắt đầu bằng http://stackoverflow.com. Sau đó, một hàm được định nghĩa sử dụng biểu thức chính quy đơn giản để thay thế phần này của URL bằng một biểu thức mới. Lưu ý tính linh hoạt mà điều này mang lại cho bạn - mọi loại sửa đổi cho liên kết có thể được thực hiện ở đây.

Với jQuery 1.6 trở lên, bạn nên sử dụng:

$("a").prop("href", "http://www.jakcms.com")

Sự khác biệt giữa propvà attrlà attrlấy thuộc tính HTML trong khi proplấy thuộc tính DOM.

Bạn có thể tìm thêm chi tiết trong bài viết này: .prop () vs .attr ()

Sử dụng attrphương pháp trên tra cứu của bạn. Bạn có thể tắt bất kỳ thuộc tính nào có giá trị mới.

$("a.mylink").attr("href", "http://cupcream.com");

Tùy thuộc vào việc bạn muốn thay đổi tất cả các liên kết giống hệt nhau sang một liên kết khác hay bạn muốn kiểm soát chỉ các liên kết trong một phần nhất định của trang hoặc từng liên kết riêng lẻ, bạn có thể thực hiện một trong những liên kết này.

Thay đổi tất cả các liên kết đến Google để họ trỏ đến Google Maps:

<a href="http://www.google.com">

$("a[href='http://www.google.com/']").attr('href', 
'http://maps.google.com/');

Để thay đổi các liên kết trong một phần nhất định, hãy thêm lớp div của container vào bộ chọn. Ví dụ này sẽ thay đổi liên kết Google trong nội dung, nhưng không phải ở chân trang:

<div class="content">
    <p>...link to <a href="http://www.google.com/">Google</a>
    in the content...</p>
</div>

<div class="footer">
    Links: <a href="http://www.google.com/">Google</a>
</div>

$(".content a[href='http://www.google.com/']").attr('href', 
'http://maps.google.com/');

Để thay đổi các liên kết riêng lẻ bất kể chúng nằm ở đâu trong tài liệu, hãy thêm id vào liên kết và sau đó thêm id đó vào bộ chọn. Ví dụ này sẽ thay đổi liên kết Google thứ hai trong nội dung, nhưng không thay đổi liên kết đầu tiên hoặc liên kết ở chân trang:

<div class="content">
    <p>...link to <a href="http://www.google.com/">Google</a>
    in the content...</p>
    <p>...second link to <a href="http://www.google.com/" 
        id="changeme">Google</a>
    in the content...</p>
</div>

<div class="footer">
    Links: <a href="http://www.google.com/">Google</a>
</div>

$("a#changeme").attr('href', 
'http://maps.google.com/');

_{Mặc dù OP đã hỏi rõ ràng về câu trả lời của jQuery, bạn không cần sử dụng jQuery cho mọi thứ hiện nay.}

Một vài phương thức không có jQuery:

• Nếu bạn muốn thay đổi các hrefgiá trị của tất cả các <a> yếu tố, chọn tất cả và sau đó lặp qua NodeList : (ví dụ)

  var anchors = document.querySelectorAll('a');
  Array.prototype.forEach.call(anchors, function (element, index) {
      element.href = "http://stackoverflow.com";
  });
  

• Nếu bạn muốn thay đổi hrefgiá trị của tất cả các <a>thành phần thực sự có hrefthuộc tính, hãy chọn chúng bằng cách thêm [href]bộ chọn thuộc tính ( a[href]): (ví dụ)

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

• Ví dụ: nếu bạn muốn thay đổi hrefgiá trị của <a>các phần tử có chứa một giá trị cụ thể, google.comhãy sử dụng bộ chọn thuộc tính a[href*="google.com"]: (ví dụ)

  var anchors = document.querySelectorAll('a[href*="google.com"]');
  Array.prototype.forEach.call(anchors, function (element, index) {
      element.href = "http://stackoverflow.com";
  });

  Tương tự như vậy, bạn cũng có thể sử dụng các bộ chọn thuộc tính khác . Ví dụ:

  • a[href$=".png"]có thể được sử dụng để chọn <a>các phần tử có hrefgiá trị kết thúc bằng .png.

  • a[href^="https://"]có thể được sử dụng để chọn <a>các yếu tố với hrefgiá trị được tiền tố với https://.

• Nếu bạn muốn thay đổi hrefgiá trị của <a>các phần tử thỏa mãn nhiều điều kiện: (ví dụ)

  var anchors = document.querySelectorAll('a[href^="https://"], a[href$=".png"]');
  Array.prototype.forEach.call(anchors, function (element, index) {
      element.href = "http://stackoverflow.com";
  });

..không cần regex, trong hầu hết các trường hợp.

Đoạn mã này gọi khi một liên kết của lớp 'menu_link' được nhấp và hiển thị văn bản và url của liên kết. Trả về false ngăn liên kết được theo dõi.

<a rel='1' class="menu_link" href="option1.html">Option 1</a>
<a rel='2' class="menu_link" href="option2.html">Option 2</a>

$('.menu_link').live('click', function() {
   var thelink = $(this);
   alert ( thelink.html() );
   alert ( thelink.attr('href') );
   alert ( thelink.attr('rel') );

   return false;
});

Cách đơn giản để làm như vậy là:

Hàm Attr (kể từ phiên bản jQuery 1.0)

$("a").attr("href", "https://stackoverflow.com/") 

hoặc là

Hàm prop (kể từ phiên bản jQuery 1.6)

$("a").prop("href", "https://stackoverflow.com/")

Ngoài ra, ưu điểm của cách trên là nếu bộ chọn chọn một neo duy nhất, nó sẽ chỉ cập nhật neo đó và nếu bộ chọn trả về một nhóm neo, nó sẽ cập nhật nhóm cụ thể chỉ qua một câu lệnh.

Bây giờ, có rất nhiều cách để xác định neo chính xác hoặc nhóm neo:

Những người khá đơn giản:

1. Chọn neo thông qua tên thẻ: $("a")
2. Chọn neo thông qua chỉ mục: $("a:eq(0)")
3. Chọn neo cho các lớp cụ thể (như trong lớp này chỉ neo với lớp active):$("a.active")
4. Chọn neo với ID cụ thể (ở đây trong ví dụ profileLink ID):$("a#proileLink")
5. Chọn neo đầu tiên: $("a:first")

Những cái hữu ích hơn:

6. Chọn tất cả các yếu tố với thuộc tính href: $("[href]")
7. Chọn tất cả các neo với cụ thể href: $("a[href='www.stackoverflow.com']")
8. Chọn tất cả các neo không có cụ thể href: $("a[href!='www.stackoverflow.com']")
9. Chọn tất cả các neo với href chứa URL cụ thể: $("a[href*='www.stackoverflow.com']")
10. Chọn tất cả các neo với href bắt đầu bằng URL cụ thể: $("a[href^='www.stackoverflow.com']")
11. Chọn tất cả các neo có href kết thúc bằng URL cụ thể: $("a[href$='www.stackoverflow.com']")

Bây giờ, nếu bạn muốn sửa đổi các URL cụ thể, bạn có thể làm như:

Ví dụ: nếu bạn muốn thêm trang web proxy cho tất cả các URL truy cập google.com, bạn có thể triển khai nó như sau:

$("a[href^='http://www.google.com']")
   .each(function()
   { 
      this.href = this.href.replace(/http:\/\/www.google.com\//gi, function (x) {
        return "http://proxywebsite.com/?query="+encodeURIComponent(x);
    });
   });

Ngừng sử dụng jQuery chỉ vì lợi ích của nó! Điều này rất đơn giản chỉ với JavaScript.

document.querySelector('#the-link').setAttribute('href', 'http://google.com');

https://jsfiddle.net/bo77f8mg/1/

 $("a[href^='http://stackoverflow.com']")
   .each(function()
   { 
      this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/, 
         "http://stackoverflow.com");
   });

Thay đổi HREF của Hình ảnh Logo của Wordpress Avada

Nếu bạn cài đặt plugin ShortCode Exec PHP, bạn có thể tạo Shortcode này mà tôi gọi là myjavascript

?><script type="text/javascript">
jQuery(document).ready(function() {
jQuery("div.fusion-logo a").attr("href","tel:303-985-9850");
});
</script>

Bây giờ bạn có thể đi đến Giao diện / Tiện ích và chọn một trong các khu vực tiện ích chân trang và sử dụng tiện ích văn bản để thêm mã ngắn sau

[myjavascript]

Công cụ chọn có thể thay đổi tùy thuộc vào hình ảnh bạn sử dụng và nếu võng mạc sẵn sàng nhưng bạn luôn có thể tìm ra nó bằng cách sử dụng các công cụ dành cho nhà phát triển.

href trong một thuộc tính, vì vậy bạn có thể thay đổi nó bằng JavaScript thuần túy, nhưng nếu bạn đã chèn jQuery vào trang của mình, đừng lo lắng, tôi sẽ chỉ ra cả hai cách:

Hãy tưởng tượng bạn có cái này hrefdưới đây:

<a id="ali" alt="Ali" href="http://dezfoolian.com.au">Alireza Dezfoolian</a>

Và bạn muốn thay đổi nó liên kết ...

Sử dụng JavaScript thuần mà không cần bất kỳ thư viện nào bạn có thể làm:

document.getElementById("ali").setAttribute("href", "https://stackoverflow.com");

Nhưng cũng trong jQuery bạn có thể làm:

$("#ali").attr("href", "https://stackoverflow.com");

hoặc là

$("#ali").prop("href", "https://stackoverflow.com");

Trong trường hợp này, nếu bạn đã chèn jQuery, có lẽ jQuery sẽ trông ngắn hơn và nhiều trình duyệt hơn ... nhưng khác với điều đó tôi đi với JS...