how to change an anchor tag using jquery by selecting its class

Question

I know this may seem really simple but am having trouble this end figuring out a way of selecting the class and changing ONLY that href.. here is the html ...

<a href="http://www.something" class="theclassname">LEARN MORE</a>

so far with javascript ...

$('.theclassname').click(function(){
    (change the href to www.awesome.com)
});

So far really appreciate alll answers on this ... I need the href to change but not go to the url that it has changed to until the user clicks once more... so far the actual code is this ...

$('.hrefclass').click(function () {
    e.preventDefault();
    $(this).attr("href", "http://www.google.org/");
    $('.kwicks').kwicks({
        maxSize: '100%',
        behavior: 'menu'
    });
});

however this does not appear to work .

LATEST

Ok so adding return false indeed works but also stops the kiwcks function from running ... how can i get around this ?

$('.hrefclassname').one("click", function() {
$('.kwicks').kwicks({
maxSize: '100%',
behavior: 'menu'
    });
    $(this).attr("href", "http://www.gooogle.org/");
return false;
});

LATEST LATEST

$('.HREFCLASSNAME').one("click", function() {
 e.preventDefault();
    $(this).attr("href", "http://www.GOOGLE.org/");
$('.kwicks').kwicks({
maxSize: '100%',
behavior: 'menu'
    });

});

In regards to your edit, try starting the href out as being href="javascript:void(0)", that way it won't link to anything before the user clicks to change it. — Maximillian Laumeister, Jul 07 '15 at 23:18
Just added a jsFiddle to my answer, so you can see it working in context. — Maximillian Laumeister, Jul 07 '15 at 23:25
yeah it toally works in your fiddle but i have no idea why it wont work with the associated code i am using when it works just fine without the link change — havingagoatit, Jul 07 '15 at 23:28
ok , problem is with return false is that it stops the kwicks function from completing how do i get aruond this ? — havingagoatit, Jul 07 '15 at 23:38

score 3 · Answer 1 · answered Jul 07 '15 at 23:01

3

Use

$(this).attr('href','www.awesome.com')

answered Jul 07 '15 at 23:01

mwoelk

1,182
10
14

m4n0 · Answer 2 · 2015-07-07T23:11:04.303

3

You can use the attr() method of jQuery to alter the links. href is the attribute here and the link is its value.

$('.theclassname').on('click', function() {
  $(this).attr('href', 'http://google.com');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://www.something" class="theclassname">LEARN MORE</a>

edited Jul 07 '15 at 23:11

answered Jul 07 '15 at 23:01

m4n0

29,823
27
76
89

the prevent default isn't working i edited the post to show my code it just goes straight to the link and when i put in the preventDefault line it does nothing – havingagoatit Jul 07 '15 at 23:14
You didn't pass the parameter `e` in your code. `function (e)` – m4n0 Jul 07 '15 at 23:15

Maximillian Laumeister · Answer 3 · 2015-07-07T23:41:00.890

In your function, the variable "this" contains the DOM element that you clicked on. Wrap it using jQuery using "$(this)", then call jQuery's attr function to set the href attribute to whatever url you'd like.

Here is a working jsFiddle: https://jsfiddle.net/57foqwaq/2/

Here's the example code:

$('.theclassname').one("click", function(e) {
    e.preventDefault();
    $(this).attr("href", "https://www.example.com/");
});

Francisco Maria Calisto · Answer 4 · 2015-07-08T00:28:33.670

1

If you want an invocation to a link of theclassname when it is clicked, and then to show the text and URL of the link you can try this other option:

HTML

<a rel='1' class="theclassname" href="option1.html">Option 1</a>
<a rel='2' class="theclassname" href="option2.html">Option 2</a>

jQuery

$('.theclassname').one('click', function() {
   var link = $(this);
   alert (link.html());
   alert (link.attr('href'));
   alert (link.attr('rel'));

   return false;
});

The return false prevents the link from being followed.

edited Jul 08 '15 at 00:28

answered Jul 07 '15 at 23:12

Francisco Maria Calisto

2,841
4
22
54

jQuery's `.live` has been deprecated for a long time now – Gustavo Hoirisch Jul 08 '15 at 00:00
Thank you @gustavo-hoirisch for remember me that. – Francisco Maria Calisto Jul 08 '15 at 00:29

score 1 · Accepted Answer · edited May 23 '17 at 12:24

The following code (as others have mentioned) should work:

// notice "e" being passed to the function:
$('.HREFCLASSNAME').one("click", function(e) {

    e.preventDefault();

    // assuming "this" is an "<a>" tag: 
    $(this).attr("href", "http://www.GOOGLE.org/");
    $('.kwicks').kwicks({
         maxSize: '100%',
         behavior: 'menu'
    });
});

This should stop the "event propagation," or in other words the link should not fire.

If this the link is still firing, you may have an issue similar to this example where the event is "bubbling up" and causing the link to fire anyway. If this is the case (which, would indicate you haven't provided a valid html example for your specific problem,) you can stop the event from propagating by replacing e.preventDefault() with this:

e.stopImmediatePropagation();

Francisco Maria Calisto · Answer 6 · 2015-07-07T23:15:22.400

0

You just need to try:

$(this).attr("href", new_href);

And I think it might work for you.

edited Jul 07 '15 at 23:15

answered Jul 07 '15 at 23:04

Francisco Maria Calisto

2,841
4
22
54

how to change an anchor tag using jquery by selecting its class

6 Answers6

HTML

jQuery