Câu hỏi Làm thế nào để thay đổi href cho một siêu liên kết bằng cách sử dụng jQuery


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


1090
2017-10-07 18:17


gốc


Đối với những người bạn quan tâm đến giải pháp không có việc sử dụng jQuery - stackoverflow.com/questions/179713/… - Josh Crozier
Đối với các phiên bản jQuery mới hơn: stackoverflow.com/a/6348239/4928642 - Qwertiy
ví dụ đơn giản nhất mà không có jQuery stackoverflow.com/a/39276418/696535 - Pawel
Một danh sách đầy đủ các giải pháp có thể, một số bộ chọn hữu ích và cách để có được giá trị của các trận đấu của regex và sử dụng chúng để cập nhật href: stackoverflow.com/a/49568546/1262248 - Aman Chhabra


Các câu trả lời:


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ỏ tới Google. Bạn có thể muốn có một bộ chọn lọc tinh tế hơn một chút. Ví dụ: nếu bạn có kết hợp các thẻ liên kết nguồn (liên kết) và liên kết đích (a.k.a. "anchor"):

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

... Có thể bạn không muốn vô tình thêm href thuộc tính cho họ. Vì lý do an toàn, chúng tôi có thể chỉ định rằng công cụ chọn của chúng tôi sẽ chỉ khớp <a> thẻ có sẵn href thuộc tính:

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

Tất nhiên, bạn sẽ có thể có một cái gì đó thú vị hơn trong tâm trí. Nếu bạn muốn kết hợp một neo với một hiện tại cụ thể 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 đó href khớp chính xác với chuỗi http://www.google.com/. Một nhiệm vụ có 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 trong đó href bắt đầu với http://stackoverflow.com. Sau đó, một hàm được định nghĩa sử dụng cụm từ thông dụng đơ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 này mang lại cho bạn - bất kỳ loại sửa đổi nào đối với liên kết đều có thể được thực hiện tại đây.


1610
2017-10-07 18:19



"trong HTML, các tên phần tử phân biệt chữ hoa chữ thường, nhưng trong XML chúng phân biệt chữ hoa chữ thường." - - w3.org/TR/CSS21/selector.html - eyelidlessness
Để hoàn thành, vì điều này vẫn được liên kết với đôi khi, tôi sẽ thêm rằng kể từ jQuery 1.4, ví dụ cuối cùng không yêu cầu sử dụng each - sau đây có thể là: $(selector).attr('href', function() { return this.replace(/.../, '...'); }); - David Hedlund
@DavidHedlund Chỉnh sửa nhẹ: bạn đã bỏ lỡ href: ...return this.href.replace(/.../, '...'); }); - Armstrongest
Tôi sử dụng prop thay vì attr và nó làm việc cho tôi. - SolidSnake4444


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 prop và attr đó là attr lấy thuộc tính HTML trong khi prop lấy thuộc tính DOM.

Bạn có thể tìm thêm chi tiết trong bài đăng này: .prop () so với .attr ()


251
2018-06-14 18:28



Giải thích lý do bạn nên sử dụng prop kết thúc attr sẽ được đánh giá cao, cho những người đến với câu hỏi và tìm kiếm attr dường như hoạt động hoàn toàn tốt trong các phiên bản jQuery mới hơn ... - womble
@womble using prop nhanh hơn attr bởi vì nó cập nhật dom thay vì sửa đổi HTML. jsfiddle.net/je4G5 - Popnoodles
@Popnoodles Có nhiều vấn đề hơn thế, nhưng nó sẽ là quá dài để giải thích tất cả chúng ở đây. Vì vậy, độc giả nên chỉ cần có một cái nhìn tại bài viết womble liên kết. Tuy nhiên, một bản tóm tắt ở đây sẽ rất hay, nếu không thì thông tin này sẽ bị mất đi .. - Rauni Lillemets


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

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

69
2017-10-07 18:20



Điều này làm việc cho tôi nếu tôi đặt class = "mylink" trong thẻ. Chỉ muốn làm rõ rằng trong trường hợp bất cứ ai cố gắng thiết lập tên = "mylink" tương tự như câu trả lời ở trên và hy vọng nó hoạt động. - cpuguru


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 với một thứ gì khác hoặc bạn chỉ muốn kiểm soát những liên kết đó trong một phần nhất định của trang hoặc từng trang riêng lẻ, bạn có thể thực hiện một trong những điều này.

Thay đổi tất cả các liên kết đến Google để chúng trỏ tới Google Maps:

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

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

Để thay đổi liên kết trong một phần nhất định, hãy thêm lớp của div của vùng chứa vào công cụ chọn. Ví dụ này sẽ thay đổi liên kết Google trong nội dung, nhưng không thay đổ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 rơi vào đâu trong tài liệu, hãy thêm một 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 của Google trong phần 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/');

37
2017-10-17 17:58





Mặc dù OP đã yêu cầu một câu trả lời jQuery một cách rõ ràng, bạn không cần phải sử dụng jQuery cho tất cả mọi thứ trong những ngày này.

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

  • Nếu bạn muốn thay đổi href giá trị của tất cả các  <a> các phần tử, chọn tất cả và sau đó lặp qua danh sách: (thí 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 href giá trị của tất cả <a> các yếu tố thực sự có href , chọn chúng bằng cách thêm [href] bộ chọn thuộc tính (a[href]): (thí dụ)

    var anchors = document.querySelectorAll('a[href]');
    Array.prototype.forEach.call(anchors, function (element, index) {
        element.href = "http://stackoverflow.com";
    });
    
  • Nếu bạn muốn thay đổi href giá trị của <a> các yếu tố chứa một giá trị cụ thể, ví dụ google.com, sử dụng công cụ chọn thuộc tính a[href*="google.com"]: (thí 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ự, bạn cũng có thể sử dụng bộ chọn thuộc tính. Ví dụ:

    • a[href$=".png"]có thể được sử dụng để chọn <a> các yếu tố có href giá 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 href các giá trị có tiền tố với https://.

  • Nếu bạn muốn thay đổi href giá trị của <a> các yếu tố đáp ứng nhiều điều kiện: (thí 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 phần lớn các trường hợp.


29
2018-01-19 00:51





Đ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 bị theo sau.

<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;
});

8
2017-12-10 06:25



Tôi không quá phẫn nộ về cuộc bỏ phiếu xuống, nhưng nếu bạn không định nói lý do tại sao bạn bỏ phiếu, không có gì đạt được, và bạn không nên bận tâm. - crafter
Bỏ phiếu xuống vì đoạn trích và câu trả lời của bạn không trả lời câu hỏi gốc và không thực sự giải thích lý do tại sao thông tin thu được bằng đoạn mã là hữu ích. - David Millar
Bỏ phiếu xuống dưới đây là giả tạo. Anh / cô ấy có thể không đặt nhiều nỗ lực vào câu trả lời của mình như những người dùng khác nhưng anh / cô ấy đã thực sự cung cấp mã để giải quyết vấn đề. OP sẽ chỉ cần suy nghĩ thêm một chút bên cạnh việc sao chép và dán một giải pháp tùy chỉnh. - Ulises


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

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

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


6
2017-09-01 16:17



Không đủ jQuery. - malckier


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

2
2017-07-13 11:40





Thay đổi HREF của Wordpress Avada Theme Logo Image

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à liên kết của tôi

?><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ể vào Appearance / Widgets và chọn một trong các khu vực phụ của chân trang và sử dụng tiện ích văn bản để thêm shortcode sau

[myjavascript]

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


1
2018-03-24 17:47





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à

Chức năng Prop (kể từ phiên bản jQuery 1.6)

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

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

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

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ỉ có neo với lớp active): $("a.active")
  4. Chọn neo có ID cụ thể (ví dụ ở đây) profileLink ID) : $("a#proileLink")
  5. Chọn href đầu tiên: $("a:first")

Những người hữu ích hơn:

  1. Chọn tất cả các phần tử có thuộc tính href: $("[href]")
  2. Chọn tất cả các neo có href cụ thể: $("a[href='www.stackoverflow.com']")
  3. Chọn tất cả các neo không có href cụ thể: $("a[href!='www.stackoverflow.com']")
  4. Chọn tất cả các neo có href chứa URL cụ thể: $("a[href*='www.stackoverflow.com']")
  5. Chọn tất cả các neo có href bắt đầu bằng URL cụ thể: $("a[href^='www.stackoverflow.com']")
  6. 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ư sau:

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);
    });
   });

1
2018-03-30 04:51