如何通过选择类来使用jquery更改锚标记

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

});

Answer 1

采用

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

Answer 2

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> 

Answer 3

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

Answer 4

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.

Answer 5

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

Answer 6

You just need to try:

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

And I think it might work for you.