失眠网 > 如何使用jQuery更改超链接的href

如何使用jQuery更改超链接的href

时间：2023-11-03 03:55:39

如何使用jQuery更改超链接的href？

#1楼

使用

$("a").attr("href", "/")

会修改所有超链接的href，以指向Google。您可能需要一个更精细的选择器。例如，如果您混合使用链接源（超链接）和链接目标（也称为“锚”）锚标签：

<a name="MyLinks"></a><a href="/">The CodeProject</a>

...那么您可能不想意外地向它们添加href属性。为了安全起见，我们可以指定选择器只匹配具有现有href属性的<a>标签：

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

当然，您可能会想到一些更有趣的东西。如果要使锚与特定的现有href匹配，则可以使用如下所示的内容：

$("a[href='/']").attr('href', '/')

这将找到href完全匹配字符串/。一个更复杂的任务可能是匹配，然后仅更新href一部分：

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

第一部分仅选择href以开头的链接。然后，定义一个函数，该函数使用简单的正则表达式将URL的这一部分替换为新的。请注意，这为您提供了灵活性-可以在此处对链接进行任何形式的修改。

#2楼

在查询中使用attr方法。您可以切换出具有新值的任何属性。

$("a.mylink").attr("href", "");

#3楼

根据您是要将所有相同的链接更改为其他链接，还是要仅控制页面给定部分中的链接，还是要单独控制每个链接，可以执行其中之一。

更改所有指向Google的链接，使它们指向Google Maps：

<a href="">$("a[href='/']").attr('href', '/');

要更改给定部分中的链接，请将容器div的类添加到选择器。此示例将更改内容中的Google链接，但不会更改页脚中的链接：

<div class="content"><p>...link to <a href="/">Google</a>in the content...</p></div><div class="footer">Links: <a href="/">Google</a></div>$(".content a[href='/']").attr('href', '/');

要更改各个链接，无论它们在文档中的位置如何，请向该链接添加一个ID，然后将该ID添加至选择器。此示例将更改内容中的第二个Google链接，但不会更改第一个或页脚中的一个：

<div class="content"><p>...link to <a href="/">Google</a>in the content...</p><p>...second link to <a href="/" id="changeme">Google</a>in the content...</p></div><div class="footer">Links: <a href="/">Google</a></div>$("a#changeme").attr('href', '/');

#4楼

即使OP明确要求提供jQuery答案，但这些天都不需要使用jQuery。

一些没有jQuery的方法：

如果要更改所有<a>元素的href值，请全部选择它们，然后遍历nodelist ：（示例）

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

如果要更改实际上具有href属性的所有<a>元素的href值，请通过添加[href]属性选择器（a[href]）进行选择：（示例）

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

如果要更改包含特定值的<a>元素的href值，例如，请使用属性选择器a[href*=""]：（示例）

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

同样，您也可以使用其他属性选择器。例如：

a[href$=".png"]可用于选择href值以.png结尾的<a>元素。

a[href^="https://"]可用于选择<a>具有href值并以https://<a>元素。

如果要更改满足多个条件的<a>元素的href值：（示例）

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

..在大多数情况下不需要正则表达式。

#5楼

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

#6楼

仅仅为了它而停止使用jQuery！仅使用JavaScript如此简单。

document.querySelector('#the-link').setAttribute('href', '');

/bo77f8mg/1/

#7楼

更改Wordpress Avada主题徽标图像的HREF

如果您安装ShortCode Exec PHP插件，则可以创建我称为myjavascript的此Shortcode。

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

现在，您可以转到外观/小部件并选择页脚小部件区域之一，并使用文本小部件添加以下短代码

[myjavascript]

选择器可能会根据您使用的图像以及是否已准备好视网膜而改变，但是您始终可以使用开发人员工具来找出它。

#8楼

单击“ 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楼

这样做的简单方法是：

Attr函数（自jQuery 1.0版开始）

$("a").attr("href", "/")

要么

Prop函数（自jQuery 1.6版开始）

$("a").prop("href", "/")

同样，上述方式的优点在于，如果选择器选择单个锚，则仅更新该锚，并且如果选择器返回一组锚，则仅通过一条语句更新特定组。

现在，有很多方法可以识别确切的锚点或一组锚点：

很简单的一个：

通过标签名称选择锚：$("a")通过索引选择锚点：$("a:eq(0)")选择特定类的锚点（如在该类中，仅锚定类为active锚点）：$("a.active")选择具有特定ID的锚点（此处为profileLinkID示例）：$("a#proileLink")选择第一个锚href：$("a:first")

更有用的：

选择所有具有href属性的元素：$("[href]")选择所有具有特定href的锚点：$("a[href='']")选择所有不具有特定href的锚点：$("a[href!='']")选择所有带有带有特定URL的href的锚点：$("a[href*='']")选择以特定URL开头的带有href的所有锚点：$("a[href^='']")选择所有以特定网址结尾的href锚：$("a[href$='']")

现在，如果要修改特定的URL，可以执行以下操作：

例如，如果您要为转到的所有URL添加代理网站，则可以按以下方式实现它：

$("a[href^='']").each(function(){ this.href = this.href.replace(/http:\/\/\//gi, function (x) {return "/?query="+encodeURIComponent(x);});});