Jak zmienić href hiperłącza za pomocą jQuery?

Za pomocą

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

zmodyfikuje href wszystkich hiperłączy, aby wskazywały na Google. Prawdopodobnie potrzebujesz nieco bardziej wyrafinowanego selektora. Na przykład, jeśli masz połączenie tagów źródła linku (hiperłącza) i linku docelowego (aka „anchor”):

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

... Więc prawdopodobnie nie chcesz przypadkowo dodać hrefdo nich atrybutów. Dla bezpieczeństwa możemy określić, że nasz selektor będzie pasował tylko do <a>tagów z istniejącym hrefatrybutem:

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

Oczywiście prawdopodobnie będziesz mieć na myśli coś ciekawszego. Jeśli chcesz dopasować kotwicę do określonego istniejącego href, możesz użyć czegoś takiego:

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

Znajdziesz tu linki, w których hrefdokładnie pasuje do ciągu http://www.google.com/. Bardziej zaangażowanym zadaniem może być dopasowanie, a następnie zaktualizowanie tylko części href:

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

Pierwsza część wybiera jedynie linki gdzie href zaczyna się http://stackoverflow.com. Następnie definiowana jest funkcja, która używa prostego wyrażenia regularnego do zastąpienia tej części adresu URL nową. Zwróć uwagę na elastyczność, jaką to daje - w tym miejscu można dokonać dowolnej modyfikacji łącza.

Z jQuery 1.6 i nowszym powinieneś używać:

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

Różnica między propi attrpolega na tym, że attrpobiera atrybut HTML, podczas gdy proppobiera właściwość DOM.

Możesz znaleźć więcej szczegółów w tym poście: .prop () vs .attr ()

Użyj attrmetody przy wyszukiwaniu. Możesz zmienić dowolny atrybut z nową wartością.

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

W zależności od tego, czy chcesz zmienić wszystkie identyczne linki do czegoś innego, czy też chcesz kontrolować tylko te w danej sekcji strony lub każdy z osobna, możesz zrobić jeden z nich.

Zmień wszystkie linki na Google, tak aby wskazywały na Mapy Google:

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

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

Aby zmienić linki w danej sekcji, dodaj klasę div kontenera do selektora. Ten przykład zmieni link Google w treści, ale nie w stopce:

<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/');

Aby zmienić poszczególne łącza niezależnie od tego, gdzie znajdują się w dokumencie, dodaj identyfikator do łącza, a następnie dodaj ten identyfikator do selektora. Ten przykład zmieni drugi link Google w treści, ale nie pierwszy ani ten w stopce:

<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/');

_{Mimo że OP wyraźnie poprosił o odpowiedź jQuery, w dzisiejszych czasach nie musisz używać jQuery.}

Kilka metod bez jQuery:

• Jeśli chcesz zmienić hrefwartość wszystkich <a> elementów, zaznacz je wszystkie, a następnie iteruj przez listę węzłów : (przykład)

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

• Jeśli chcesz zmienić hrefwartość wszystkich <a>elementów, które faktycznie mają hrefatrybut, wybierz je, dodając [href]selektor atrybutów ( a[href]): (przykład)

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

• Jeśli chcesz na przykład zmienić hrefwartość <a>elementów zawierających określoną wartość google.com, użyj selektora atrybutów a[href*="google.com"]: (przykład)

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

  Podobnie można także użyć innych selektorów atrybutów . Na przykład:

  • a[href$=".png"]może być użyty do wybrania <a>elementów, których hrefwartość kończy się na .png.

  • a[href^="https://"]może być użyty do wybrania <a>elementów z hrefwartościami z prefiksemhttps:// .

• Jeśli chcesz zmienić hrefwartość <a>elementów spełniających wiele warunków: (przykład)

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

.. w większości przypadków nie ma potrzeby wyrażenia regularnego .

Ten fragment kodu wywołuje się po kliknięciu łącza klasy „menu_link” i pokazuje tekst i adres URL linku. Zwracana wartość false zapobiega podążaniu za linkiem.

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

Najprostszym sposobem na to jest:

Funkcja Attr (od wersji jQuery 1.0)

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

lub

Funkcja prop (od wersji jQuery 1.6)

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

Zaletą powyższego sposobu jest to, że jeśli selektor wybierze jedną kotwicę, zaktualizuje tylko tę kotwicę, a jeśli selektor zwróci grupę kotwicy, zaktualizuje określoną grupę tylko za pomocą jednej instrukcji.

Istnieje wiele sposobów na określenie dokładnej kotwicy lub grupy kotwic:

Całkiem proste:

1. Wybierz kotwicę poprzez nazwę znacznika: $("a")
2. Wybierz kotwicę za pomocą indeksu: $("a:eq(0)")
3. Wybierz kotwicę dla określonych klas (jak w tej klasie tylko kotwice z klasą active):$("a.active")
4. Wybieranie kotwic o określonym ID (tutaj w przykładowym profileLink ID):$("a#proileLink")
5. Wybór pierwszej href kotwicy: $("a:first")

Bardziej przydatne:

6. Zaznaczanie wszystkich elementów za pomocą atrybutu href: $("[href]")
7. Zaznaczanie wszystkich kotwic z określonym obszarem: $("a[href='www.stackoverflow.com']")
8. Zaznaczanie wszystkich kotwic nieposiadających określonego obszaru: $("a[href!='www.stackoverflow.com']")
9. Zaznaczanie wszystkich kotwic z href zawierających określony adres URL: $("a[href*='www.stackoverflow.com']")
10. Zaznaczanie wszystkich kotwic z href rozpoczynających się od określonego adresu URL: $("a[href^='www.stackoverflow.com']")
11. Zaznaczanie wszystkich kotwic z href kończącym się określonym adresem URL: $("a[href$='www.stackoverflow.com']")

Teraz, jeśli chcesz zmienić określone adresy URL, możesz to zrobić jako:

Na przykład, jeśli chcesz dodać witrynę proxy dla wszystkich adresów URL prowadzących do google.com, możesz zaimplementować ją w następujący sposób:

$("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);
    });
   });

Przestań używać jQuery tylko ze względu na to! To jest tak proste tylko z 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");
   });

Zmień HREF obrazu logo motywu Wordpress Avada

Jeśli zainstalujesz wtyczkę ShortCode Exec PHP, możesz utworzyć ten krótki kod, który nazwałem myjavascript

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

Możesz teraz przejść do Wygląd / Widżety i wybrać jeden z obszarów widgetów stopki i użyć widżetu tekstowego, aby dodać następujący kod

[myjavascript]

Selektor może się zmieniać w zależności od tego, jakiego obrazu używasz i czy jest gotowy na siatkówkę, ale zawsze możesz to rozgryźć za pomocą narzędzi programistycznych.

href w atrybucie, abyś mógł go zmienić za pomocą czystego JavaScript, ale jeśli masz już wstrzyknięty jQuery na swojej stronie, nie martw się, pokażę to w obie strony:

Wyobraź sobie, że masz to hrefponiżej:

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

I chcesz to zmienić link ...

Używając czystego JavaScript bez żadnej biblioteki możesz:

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

Ale także w jQuery możesz:

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

lub

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

W tym przypadku, jeśli masz już wstrzyknięty jQuery, prawdopodobnie jQuery jeden wygląda na krótszy i więcej w różnych przeglądarkach ... ale poza tym idę z tym JS...