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

你怎么能改变使用jQuery超链接的href？

Answer 1

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

…将所有超链接的href修改为指向Google。 你可能想要一个更精致的select器。 例如，如果你有一个链接源（超链接）和链接目标（又名“锚”）锚标签的混合：

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

…那么你可能不希望不小心添加href属性。 为了安全起见，我们可以指定我们的select器只匹配<a>标记与现有的href属性：

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

当然，你可能会想一些更有趣的事情。 如果你想匹配一个特定的现有href锚点，你可以使用这样的东西：

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

这将findhref完全匹配stringhttp://www.google.com/ 。 更复杂的任务可能是匹配，然后只更新部分的href ：

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

第一部分只selecthref 从 http://stackoverflow.com 开始的链接。 然后，定义一个函数，使用一个简单的正则expression式来replace这部分URL。 请注意这给你的灵活性 – 对链接的任何修改都可以在这里完成。

Answer 2

使用jQuery 1.6及以上版本，您应该使用：

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

prop和attr之间的区别在于attr抓取了prop属性抓取DOM属性的HTML属性。

你可以在这篇文章中find更多细节： .prop（）vs .attr（）

Answer 3

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

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

Answer 4

根据是否要将所有相同的链接更改为其他内容，或者想要控制页面给定部分中的每个链接或每个链接，可以执行其中的一个。

更改所有指向Google的链接，以便指向Google地图：

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

要更改给定部分中的链接，请将容器div的类添加到select器中。 此示例将更改内容中的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/'); 

要更改单个链接，而不考虑它们落在文档中的位置，请向该链接添加一个id，然后将该id添加到select器。 这个例子将改变内容中的第二个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/'); 

Answer 5

_{尽pipeOP明确要求提供一个jQuery答案，但现在你不需要使用jQuery。}

一些没有jQuery的方法：

• 如果要更改所有 <a>元素的href值，请select所有元素，然后遍历节点列表 ：（ 示例）

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

• 如果你想改变实际上有一个href属性的所有<a>元素的href值，通过添加[href]属性select器（ a[href] ）来select它们：（ 例子）

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

• 如果要更改包含特定值（例如google.com的<a>元素的href值，请使用属性select器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"; }); 

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

  • a[href$=".png"]来select< href值以.png结尾的元素。

  • a[href^="https://"]来select<a>具有以https://为前缀的 href值的元素。

• 如果你想改变满足多个条件的<a>元素的href值（例子）

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

在大多数情况下，不需要正则expression式。

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

Answer 7

停止使用jQuery只是为了它！ 只有JavaScript才是如此简单。

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

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

Answer 8

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

Answer 9

改变WordPress的Avada主题标志图像的HREF

如果你安装ShortCode Exec PHP插件，你可以创build这个我称之为myjavascript的Shortcode

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

你现在可以去Appearance / Widgets并select一个页脚小部件区域，并使用一个文本小部件来添加下面的shortcode

 [myjavascript] 

select器可能会根据您使用的图像以及视网膜准备好而改变，但是您可以使用开发人员工具随时查找。