CODEWITHSUNDEEP
javascriptjqueryhtml
havingagoatit
havingagoatit

Reputation: 583

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

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

});

Upvotes: 2

Views: 2284

Answers (6)

Francisco Maria Calisto
Francisco Maria Calisto

Reputation: 3250

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.

Upvotes: 1

wahwahwah
wahwahwah

Reputation: 3177

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();

Upvotes: 1

Maximillian Laumeister
Maximillian Laumeister

Reputation: 20359

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/");
});

Upvotes: 2

Francisco Maria Calisto
Francisco Maria Calisto

Reputation: 3250

You just need to try:

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

And I think it might work for you.

Upvotes: 0

m4n0
m4n0

Reputation: 32275

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>

Upvotes: 3

mwoelk
mwoelk

Reputation: 1271

Use

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

Upvotes: 3

Related Questions