Как вы можете изменить href для гиперссылки с помощью jQuery?
Как изменить href для гиперссылки с помощью jQuery
Ответ 1
С помощью
$("a").attr("href", "http://www.google.com/")
изменит href всех гиперссылок, чтобы указать на 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 новой. Обратите внимание на гибкость, которую это дает вам - здесь можно было бы внести какие-либо изменения в ссылку.
Ответ 2
С jQuery 1.6 и выше вы должны использовать:
$("a").prop("href", "http://www.jakcms.com")
Разница между prop
и attr
заключается в том, что attr
захватывает атрибут HTML, тогда как prop
захватывает свойство DOM.
Вы можете найти более подробную информацию в этом сообщении: .prop() vs.attr()
Ответ 3
Используйте метод attr
для поиска. Вы можете отключить любой атрибут с новым значением.
$("a.mylink").attr("href", "http://cupcream.com");
Ответ 4
В зависимости от того, хотите ли вы изменить все идентичные ссылки на что-то еще или вы хотите контролировать только те, что указаны в данном разделе страницы или каждый отдельно, вы можете сделать один из них.
Измените все ссылки на 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/');
Ответ 5
Несмотря на то, что OP явно задал ответ на jQuery-ответ, в наши дни вам не нужно использовать jQuery.Суб >
Несколько методов без jQuery:
-
Если вы хотите изменить значение
href
элементов all<a>
, выберите их все и затем выполните итерацию через nodelist: (пример)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"; });
.. нет необходимости в регулярном выражении, в большинстве случаев.
Ответ 6
Этот фрагмент вызывает, когда нажата ссылка класса '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;
});
Ответ 7
Прекратите использовать jQuery только ради этого! Это так просто с использованием JavaScript.
document.querySelector('#the-link').setAttribute('href', 'http://google.com');
Ответ 8
$("a[href^='http://stackoverflow.com']")
.each(function()
{
this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/,
"http://stackoverflow.com");
});
Ответ 9
Простой способ сделать это:
Функция Attr (начиная с версии jQuery версии 1.0)
$("a").attr("href", "https://stackoverflow.com/")
или
Функция Prop (с версии jQuery 1.6)
$("a").prop("href", "https://stackoverflow.com/")
Кроме того, преимущество вышеописанного заключается в том, что если селектор выбирает одиночный якорь, он будет обновлять только этот привязку, и если селектор вернет группу якоря, он обновит конкретную группу только с помощью одного оператора.
Теперь есть много способов определить точный якорь или группу якорей:
Довольно простые:
- Выберите имя тега с привязкой:
$("a")
- Выберите привязку через индекс:
$("a:eq(0)")
- Выберите привязку для определенных классов (как в этом классе только привязывается с
active
классом):$("a.active")
- Выбор якорей с определенным идентификатором (здесь в примере ID
profileLink
):$("a#proileLink")
- Выбор первого якоря href:
$("a:first")
Более полезные:
- Выбор всех элементов с атрибутом href:
$("[href]")
- Выбор всех якорей с определенным href:
$("a[href='www.stackoverflow.com']")
- Выбор всех якорей, не имеющих определенного href:
$("a[href!='www.stackoverflow.com']")
- Выбор всех якорей с href, содержащих определенный URL:
$("a[href*='www.stackoverflow.com']")
- Выбор всех якорей с помощью href, начинающихся с определенного URL:
$("a[href^='www.stackoverflow.com']")
- Выбор всех якорей с 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);
});
});
Ответ 10
Измените HREF логотипа Wordpress для логотипа Wordpress
Если вы установите плагин ShortCode Exec PHP, вы можете создать этот Shortcode, который я назвал myjavascript
?><script type="text/javascript">
jQuery(document).ready(function() {
jQuery("div.fusion-logo a").attr("href","tel:303-985-9850");
});
</script>
Теперь вы можете перейти в Appearance/Widgets и выбрать одну из областей виджета нижнего колонтитула и использовать текстовый виджет, чтобы добавить следующий короткий код
[myjavascript]
Селектор может меняться в зависимости от того, какое изображение вы используете, и если оно готово к сетке, но вы всегда можете это понять, используя инструменты разработчиков.
Ответ 11
href
в атрибуте, так что вы можете изменить его, используя чистый JavaScript, но если у вас уже есть jQuery, не беспокойтесь, я покажу это в обоих направлениях:
Представьте, что у вас есть этот href
ниже:
<a id="ali" alt="Ali" href="#" onclick="location.href='http://dezfoolian.com.au'; return false;">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
...