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="" class="theclassname">LEARN MORE</a>

so far with javascript ...

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

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", "/");
    $('.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", "/");
return false;
});

LATEST LATEST

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

});

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

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/");
    $('.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/");
return false;
});

LATEST LATEST

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

});

• javascript
• jquery
• html

• 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 Commented Jul 7, 2015 at 23:18
• still nothing , what am i doing wrong ? – havingagoatit Commented Jul 7, 2015 at 23:20
• Just added a jsFiddle to my answer, so you can see it working in context. – Maximillian Laumeister Commented Jul 7, 2015 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 Commented Jul 7, 2015 at 23:28
• ok , problem is with return false is that it stops the kwicks function from pleting how do i get aruond this ? – havingagoatit Commented Jul 7, 2015 at 23:38

6 Answers 6

Use

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

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

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

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/57foqwaq/2/

Here's the example code:

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

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/");
    $('.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(); 

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.

You just need to try:

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

And I think it might work for you.