How to change the href attribute for a hyperlink using jQuery
Using
$("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.
Change the href for a hyperlink by using its value jQuery
$("a").filter(function(){
return $(this).text() == 'Accept';}).attr('href', 'http://www.accept.com');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><a href="Accept.php">Accept</a>
Change link href via jQuery
$("#quicktabs-tab-galeri-1").attr("href", new_href);
That should do the trick for you.
How to change href attribute of a link using Jquery
$("#myLink_33").attr("href", "javascript:toggleMe(0);");
Replace the href to something else using jQuery or javascript
Problems with the code fragment
First off, it is not a full document but a code fragment, as such it doesn't include appropiate headers. We can disregard this understanding that the provided code belongs to a larger document.
The following problems are present in such code fragment:
The
img
tags require a non-emptysrc
attribute and aalt
attribute.The
a
tags require a valid url value in theirhref
attribute.There doens't seem to be a closing tag for
<a href="http://">
And finally thig thing that doesn't make sense
<li<a href="http://google.com/home/inner_links">
Now, this is beyond the question, but given that you have the following fragment:
<div class="main-menu">
<ul><li<a href="http://google.com/home/inner_links"></a></li></ul>
</div>
We can see that you have closing li
and ul
tags. So I would expect that you were trying to do as follows:
<div class="main-menu">
<ul><li><a href="http://google.com/home/inner_links"></a></li></ul>
</div>
Solution
The code I'm suggesting to use to edit the href
values is the following:
$('.branding').find('img').parent().attr('href', 'newhref');
That is selecting the parents of all the img that are inside elements with class "branding", and setting the href attribute of them.
Demo with original code fragment
$('.branding').find('img').parent().attr('href', 'newhref');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="branding">
<a href="http://google.com">
<img class=" preload-me"/>
</a>
<a href="http://google.com">
<img class=" preload-me"/>
</a>
<a href="http://">
<div class="main-menu">
<ul><li<a href="http://google.com/home/inner_links"></a></li></ul>
</div>
</div>
Related Topics
Encryption in JavaScript and Decryption With PHP
Determine Timezone from Latitude/Longitude Without Using Web Services Like Geonames.Org
Send Formdata and String Data Together Through Jquery Ajax
How to Set Selected Value of Jquery Select2
Jquery: Simulating a Click on a ≪Input Type="File" /≫ Doesn't Work in Firefox
Addeventlistener("Click",...) Firing Immediately
Html5 Canvas Todataurl Returns Blank
Js Function Named 'Animate' Doesn't Work in Chrome, But Works in Ie
What Are Data-* HTML Attributes
Difference Between Node Object and Element Object
Disable Interpolation When Scaling a ≪Canvas≫
Which Browsers Support ≪Script Async="Async" /≫
Html/JavaScript: How to Access Json Data Loaded in a Script Tag With Src Set
Retrieving the Text of the Selected ≪Option≫ in ≪Select≫ Element