Как изменить href для гиперссылки, используя jQuery


1267

Как вы можете изменить href для гиперссылки, используя jQuery?


12
Для тех из вас, кто интересуется решениями без использования jQuery - stackoverflow.com/questions/179713/…
Джош Крозье,

1
Для более новых версий jQuery: stackoverflow.com/a/6348239/4928642
Qwertiy

1
Простейший пример без jQuery stackoverflow.com/a/39276418/696535
Павел

Полный список возможных решений, некоторые полезные селекторы и способ получить значение совпадений регулярных выражений и использовать их для обновления href: stackoverflow.com/a/49568546/1262248
Аман Чхабра

Ответы:


1832

С помощью

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

изменит ссылку на все гиперссылки, чтобы они указывали на Google. Вы, вероятно, хотите несколько более изысканный селектор, хотя. Например, если у вас есть сочетание тегов привязки источника ссылки (гиперссылка) и цели ссылки (она же «якорь»):

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

... Тогда вы, вероятно, не хотите случайно добавлять hrefк ним атрибуты. В целях безопасности мы можем указать, что наш селектор будет сопоставлять только <a>теги с существующим hrefатрибутом:

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

Конечно, вы, вероятно, будете иметь в виду нечто более интересное. Если вы хотите сопоставить привязку с конкретным существующим href, вы можете использовать что-то вроде этого:

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

Это найдет ссылки, где hrefточно соответствует строка http://www.google.com/. Более сложная задача может соответствовать, затем обновлять только часть href:

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

В первую часть выбирает только ссылки , где HREF начинается с http://stackoverflow.com. Затем определяется функция, которая использует простое регулярное выражение для замены этой части URL-адреса новой. Обратите внимание на гибкость, которую это дает вам - здесь может быть сделано любое изменение ссылки.


3
«в HTML имена элементов нечувствительны к регистру, но в XML они чувствительны к регистру». - w3.org/TR/CSS21/selector.html
век

47
Для полноты из-за того, что это время от времени связывают, я добавлю, что, начиная с jQuery 1.4, последний пример не требует использования each- теперь будет возможно следующее:$(selector).attr('href', function() { return this.replace(/.../, '...'); });
Дэвид Хедлунд,

14
@DavidHedlund Небольшая коррекция: вы пропустили href: ...return this.href.replace(/.../, '...'); });
Armstrongest

280

С jQuery 1.6 и выше вы должны использовать:

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

Разница между propи attrзаключается в том, что attrзахватывает атрибут HTML, а propзахватывает свойство DOM.

Вы можете найти более подробную информацию в этом сообщении: .prop () vs .attr ()


32
Было бы полезно получить объяснение, почему вы должны использовать propover attr, для людей, которые приходят к вопросу и находят, что, по- attrвидимому, прекрасно работают в новых версиях jQuery ...
womble

11
Использование @womble propбыстрее, чем attrпотому, что оно обновляет dom, а не модифицирует HTML. jsfiddle.net/je4G5
Popnoodles

2
@Popnoodles Есть больше вопросов, чем это, но было бы слишком долго, чтобы объяснить все их здесь. Так что читатели должны просто взглянуть на сообщение, связанное. Тем не менее, краткое изложение здесь было бы неплохо, в противном случае эта часть информации вроде бы теряется ..
Рауни Лиллемец

78

Используйте attrметод в вашем поиске. Вы можете отключить любой атрибут с новым значением.

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

2
Это сработало для меня, если я установил class = "mylink" в теге a. Просто хотел уточнить, что в случае, если кто-то попытается установить name = "mylink" аналогично ответу выше и ожидать, что это сработает.
cpuguru

40

В зависимости от того, хотите ли вы поменять все идентичные ссылки на что-то еще, или вы хотите контролировать только те, которые находятся в данном разделе страницы, или каждую по отдельности, вы можете сделать одну из них.

Измените все ссылки на Google, чтобы они указывали на Карты Google:

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

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

Чтобы изменить ссылки в данном разделе, добавьте класс контейнера div в селектор. Этот пример изменит ссылку Google в содержании, но не в нижнем колонтитуле:

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

Чтобы изменить отдельные ссылки независимо от того, где они находятся в документе, добавьте идентификатор в ссылку, а затем добавьте этот идентификатор в селектор. В этом примере будет изменена вторая ссылка Google в контенте, но не первая или та, что в нижнем колонтитуле:

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

36

Несмотря на то, что OP явно запрашивает ответ jQuery, вам не нужно использовать jQuery для всего в наши дни.

Несколько методов без jQuery:

  • Если вы хотите изменить hrefзначение всех <a> элементов, выберите их все, а затем выполните итерацию по нодлисту : (пример)

    var anchors = document.querySelectorAll('a');
    Array.prototype.forEach.call(anchors, function (element, index) {
        element.href = "http://stackoverflow.com";
    });
  • Если вы хотите изменить hrefзначение всех <a>элементов, которые действительно имеют hrefатрибут, выберите их, добавив [href]атрибут селектора ( a[href]): (пример)

    var anchors = document.querySelectorAll('a[href]');
    Array.prototype.forEach.call(anchors, function (element, index) {
        element.href = "http://stackoverflow.com";
    });
  • Если вы хотите изменить hrefзначение <a>элементов, которые содержат определенное значение, например google.com, используйте селектор атрибута a[href*="google.com"]: (пример)

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

    Кроме того, вы также можете использовать другие селекторы атрибутов . Например:

    • a[href$=".png"]может использоваться для выбора <a>элементов, hrefзначение которых заканчивается на .png.

    • a[href^="https://"]может быть использован для выбора <a>элементов с hrefзначениями, которые префиксом с https://.

  • Если вы хотите изменить hrefзначение <a>элементов, которые удовлетворяют нескольким условиям: (пример)

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

..не нужно регулярное выражение, в большинстве случаев.


9

Этот фрагмент кода вызывается при нажатии на ссылку класса «menu_link» и показывает текст и URL-адрес ссылки. Возврат false предотвращает переход по ссылке.

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

3
Я не слишком педантичен в отношении отрицательного голосования, но если вы не собираетесь говорить, почему отказываетесь в голосовании, ничего не достигается, и вам не стоит об этом беспокоиться.
Crafter

2
Проголосовано, потому что ваш фрагмент и ответ не отвечают на исходный вопрос и не дают никакого объяснения того, почему информация, полученная с помощью фрагмента, полезна.
Дэвид Миллар

5
Вниз голосование это педантично. Возможно, он / она не приложил столько усилий для ответа, как другие пользователи, но он действительно предоставил код для решения проблемы. ОП просто нужно немного подумать, кроме копирования и вставки нестандартного решения.
Ulises

8

Простой способ сделать это:

Функция Attr (с версии jQuery 1.0)

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

или

Функция поддержки (начиная с версии 1.6 JQuery)

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

Кроме того, преимущество описанного выше способа заключается в том, что если селектор выбирает одну привязку, он обновляет только эту привязку, а если селектор возвращает группу привязки, он обновляет конкретную группу только с помощью одного оператора.

В настоящее время существует множество способов идентифицировать точный якорь или группу якорей:

Довольно простые:

  1. Выберите привязку через имя тега: $("a")
  2. Выберите привязку через индекс: $("a:eq(0)")
  3. Выберите привязку для определенных классов (как в этом классе только привязки с классом active):$("a.active")
  4. Выбор якорей с определенным идентификатором (здесь в примере profileLink идентификатора):$("a#proileLink")
  5. Выбор первого якоря href: $("a:first")

Более полезные из них:

  1. Выбор всех элементов с атрибутом href: $("[href]")
  2. Выбор всех якорей с определенным href: $("a[href='www.stackoverflow.com']")
  3. Выбор всех якорей, не имеющих конкретного href: $("a[href!='www.stackoverflow.com']")
  4. Выбор всех якорей с href, содержащих определенный URL: $("a[href*='www.stackoverflow.com']")
  5. Выбор всех якорей с помощью href, начиная с определенного URL: $("a[href^='www.stackoverflow.com']")
  6. Выбор всех якорей с href, заканчивающимся определенным URL: $("a[href$='www.stackoverflow.com']")

Теперь, если вы хотите изменить определенные URL-адреса, вы можете сделать это следующим образом:

Например, если вы хотите добавить прокси-сайт для всех URL-адресов, идущих на google.com, вы можете сделать это следующим образом:

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


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

2

Измените HREF WordPress Avada Theme Изображение логотипа

Если вы установите плагин ShortCode Exec PHP, вы можете создать этот шорткод, который я назвал myjavascript

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

Теперь вы можете перейти к Appearance / Widgets и выбрать одну из областей виджета нижнего колонтитула и использовать текстовый виджет, чтобы добавить следующий шорткод

[myjavascript]

Селектор может меняться в зависимости от того, какое изображение вы используете, и готов ли он к сетчатке, но вы всегда можете выяснить это с помощью инструментов разработчика.


2

href в атрибуте, так что вы можете изменить его, используя чистый JavaScript, но если у вас уже есть jQuery на вашей странице, не волнуйтесь, я покажу это в обоих направлениях:

Представьте, что у вас есть это hrefниже:

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

И вы хотели бы изменить его ссылку ...

Используя чистый JavaScript без какой-либо библиотеки, вы можете сделать:

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

Но также в jQuery вы можете сделать:

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

или

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

В этом случае, если вы уже внедрили jQuery, вероятно, jQuery один выглядит короче и более кроссбраузерен ... но кроме этого я иду с JSодним ...

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.