Home How to change the href for a hyperlink using jQuery
Reply: 9

How to change the href for a hyperlink using jQuery

Brian Boatright
1#
Brian Boatright Published in 2008-10-07 18:17:33Z

How can you change the href for a hyperlink using jQuery?

Steven Penny
2#
Steven Penny Reply to 2014-02-24 02:11:03Z
$("a").attr("href", "http://www.google.com/")

...Will modify the href of all hyperlinks to point to Google. You probably want a somewhat more refined selector though. For instance, if you have a mix of link source (hyperlink) and link target (a.k.a. "anchor") anchor tags:

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

...Then you probably don't want to accidentally add href attributes to them. For safety then, we can specify that our selector will only match <a> tags with an existing href attribute:

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

Of course, you'll probably have something more interesting in mind. If you want to match an anchor with a specific existing href, you might use something like this:

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

This will find links where the href exactly matches the string http://www.google.com/. A more involved task might be matching, then updating only part of the href:

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

The first part selects only links where the href starts with http://stackoverflow.com. Then, a function is defined that uses a simple regular expression to replace this part of the URL with a new one. Note the flexibility this gives you - any sort of modification to the link could be done here.

Peter Shinners
3#
Peter Shinners Reply to 2008-10-07 18:20:45Z

Use the attr method on your lookup. You can switch out any attribute with a new value.

$("a.mylink").attr("href", "http://cupcream.com");
flamingLogos
4#
flamingLogos Reply to 2008-10-18 15:04:11Z

Depending on whether you want to change all the identical links to something else or you want control over just the ones in a given section of the page or each one individually, you could do one of these.

Change all links to Google so they point to Google Maps:

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

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

To change links in a given section, add the container div's class to the selector. This example will change the Google link in the content, but not in the footer:

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

To change individual links regardless of where they fall in the document, add an id to the link and then add that id to the selector. This example will change the second Google link in the content, but not the first one or the one in the footer:

<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/');
Chris
5#
Chris Reply to 2011-05-10 09:17:24Z

This snippet invokes when a link of class 'menu_link' is clicked, and shows the text and url of the link. The return false prevents the link from being followed.

<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;
});
Community
6#
Community Reply to 2017-05-23 10:31:37Z

With jQuery 1.6 and above you should use:

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

The difference between prop and attr is that attr grabs the HTML attribute where as prop grabs the DOM property.

You can find more details in this post: .prop() vs .attr()

Josh Crozier
7#
Josh Crozier Reply to 2015-01-19 00:51:29Z

Even though the OP explicitly asked for a jQuery answer, you don't need to use jQuery for everything these days.

A few methods without jQuery:

  • If you want to change the href value of all <a> elements, select them all and then iterate through the nodelist: (example)

    var anchors = document.querySelectorAll('a');
    Array.prototype.forEach.call(anchors, function (element, index) {
        element.href = "http://stackoverflow.com";
    });
    
  • If you want to change the href value of all <a> elements that actually have an href attribute, select them by adding the [href] attribute selector (a[href]): (example)

    var anchors = document.querySelectorAll('a[href]');
    Array.prototype.forEach.call(anchors, function (element, index) {
        element.href = "http://stackoverflow.com";
    });
    
  • If you want to change the href value of <a> elements that contain a specific value, for instance google.com, use the attribute selector a[href*="google.com"]: (example)

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

    Likewise, you can also use the other attribute selectors. For instance:

    • a[href$=".png"] could be used to select <a> elements whose href value ends with .png.

    • a[href^="https://"] could be used to select <a> elements with href values that are prefixed with https://.

  • If you want to change the href value of <a> elements that satisfy multiple conditions: (example)

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

..no need for regex, in most cases.

Anup
8#
Anup Reply to 2015-07-13 11:40:28Z
 $("a[href^='http://stackoverflow.com']")
   .each(function()
   { 
      this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/, 
         "http://stackoverflow.com");
   });
Pawel
9#
Pawel Reply to 2016-09-03 20:44:52Z

Stop using jQuery just for the sake of it! This is so simple with JavaScript only.

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

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

Cooper
10#
Cooper Reply to 2017-03-24 18:20:15Z

Change the HREF of the Wordpress Avada Theme Logo Image

If you install the ShortCode Exec PHP plugin the you can create this Shortcode which I called myjavascript

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

You can now go to Appearance/Widgets and pick one of the footer widget areas and use a text widget to add the following shortcode

[myjavascript]

The selector may change depending upon what image your using and if it's retina ready but you can always figure it out by using developers tools.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.308084 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO