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

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

7.10.2008 18:17:33
Для тех, кто интересуется решениями без использования jQuery, - stackoverflow.com/questions/179713/…
Josh Crozier 19.01.2015 00:59:21
Для более новых версий jQuery: stackoverflow.com/a/6348239/4928642
Qwertiy 23.12.2016 14:42:59
Простейший пример без jQuery stackoverflow.com/a/39276418/696535
Pawel 4.10.2017 15:00:05
Полный список возможных решений, некоторые полезные селекторы и способ получить значение совпадений регулярного выражения и использовать их для обновления href: stackoverflow.com/a/49568546/1262248
Aman Chhabra 30.03.2018 04:57:12
11 ОТВЕТОВ
РЕШЕНИЕ

С помощью

$("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-адреса новой. Обратите внимание на гибкость, которую это дает вам - здесь может быть сделано любое изменение ссылки.

1821
8.08.2018 00:51:01
«в HTML имена элементов нечувствительны к регистру, но в XML они чувствительны к регистру». - w3.org/TR/CSS21/selector.html
eyelidlessness 7.10.2008 18:25:09
Для полноты, поскольку это все еще время от времени связано, я добавлю, что начиная с jQuery 1.4, последний пример не требует использования each- теперь будет возможно следующее:$(selector).attr('href', function() { return this.replace(/.../, '...'); });
David Hedlund 11.08.2010 14:17:13
@DavidHedlund Небольшая коррекция: вы пропустили href: ...return this.href.replace(/.../, '...'); });
Armstrongest 13.10.2012 05:06:27

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

$("a.mylink").attr("href", "http://cupcream.com");
78
7.10.2008 18:20:45
Это сработало для меня, если я установил class = "mylink" в теге a. Просто хотел уточнить, что в случае, если кто-то попытается установить name = "mylink" аналогично ответу выше и ожидать, что это сработает.
cpuguru 23.06.2015 15:22:27

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

Измените все ссылки на 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/');
40
18.10.2008 15:04:11

Этот фрагмент вызывается при нажатии на ссылку класса «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;
});
9
10.05.2011 09:17:24
Я не слишком педантичен в отношении отрицательного голосования, но если вы не собираетесь говорить, почему отказываетесь в голосовании, ничего не достигается, и вам не стоит об этом беспокоиться.
crafter 5.08.2012 12:57:06
Проголосовано, потому что ваш фрагмент и ответ не отвечают на исходный вопрос и не дают никакого объяснения того, почему информация, полученная с помощью фрагмента, полезна.
David Millar 25.09.2012 20:43:52
Вниз голосование это педантично. Он / она, возможно, не приложил столько усилий для своего ответа, как другие пользователи, но он действительно предоставил код для решения проблемы. ОП просто нужно немного подумать, кроме копирования и вставки нестандартного решения.
Ulises 10.12.2012 20:54:18

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

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

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

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

279
22.06.2018 00:50:51
Было бы полезно получить объяснение, почему вы должны использовать propover attr, для людей, которые приходят к вопросу и находят, что, по- attrвидимому, прекрасно работают в новых версиях jQuery ...
womble 1.01.2012 03:26:42
Использование @womble propбыстрее, чем attrпотому, что оно обновляет dom, а не модифицирует HTML. jsfiddle.net/je4G5
Popnoodles 10.06.2014 21:57:51
@Popnoodles Есть больше вопросов, чем это, но было бы слишком долго, чтобы объяснить все их здесь. Так что читатели должны просто взглянуть на сообщение, связанное с Womble. Тем не менее, краткое изложение здесь было бы неплохо, в противном случае эта часть информации вроде бы теряется ..
Rauni Lillemets 26.11.2015 10:13:25

Несмотря на то, что 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";
    });

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

36
19.01.2015 00:51:29
 $("a[href^='http://stackoverflow.com']")
   .each(function()
   { 
      this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/, 
         "http://stackoverflow.com");
   });
3
13.07.2015 11:40:28

Прекратите использовать jQuery только ради этого! Это так просто только с JavaScript.

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

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

6
3.09.2016 20:44:52
Не хватает jQuery.
malckier 5.09.2016 14:44:30

Измените HREF Логотипа WordPress для Wordpress 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
24.03.2017 18:20:15

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

Функция 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);
    });
   });
8
30.03.2018 04:51:53

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одним ...

2
19.01.2019 04:44:26