How to change HTML link's href property dynamically

Question

Hi I have a HTML link on my MVC3 View.

I want to change its href property each time user clicks it.

<a class="tabs" href="#educationDetails">
<input id="SubmitBtn" type="submit" value="Next" />
</a>

Is there any way to solve this issue.

Many Thanks

Use JS on the click event <input id="SubmitBtn" type="submit" value="Next" onclick="changeUrls();" /> — siva
– siva, Commented Apr 16, 2012 at 11:07
Does the link go to another page? Or is it an internal link? Because if it goes to an external page then you'll need a server-side solution to remember the number of clicks. — David Thomas
– David Thomas, Commented Apr 16, 2012 at 11:07
Your HTML is invalid. <a> elements cannot contain interactive content. — Quentin
– Quentin, Commented Apr 16, 2012 at 11:26
@Quentin: Quite true. @ user: See the content model of the a element, which links to the definition of interactive content. This is unrelated to your question, but still a useful thing for Quentin to point out. — T.J. Crowder
– T.J. Crowder, Commented Apr 16, 2012 at 11:59

Okan Kocyigit · Accepted Answer · 2012-04-16 11:21:52Z

6

$(".tabs").click(function() {
   $(this).attr("href","newhref.com");
});

UPDATE

you can get attribute value like this,

$(this).attr("href")  //will return '#educationDetails'

so you can check that value like this,

$(".tabs").click(function() {
  if ($(this).attr("href") == "#tab1")
      $(this).attr("href","#tab2");
  else if ($(this).attr("href") == "#tab2")
      $(this).attr("href","#tab1");
});

UPDATE-2

If you just want to change #tab1 to #tab2, not reverse. you can also do it like this way,

$('a.tabs[href="#tab1"]').click(function() {
    $(this).attr("href","#tab2");
});

edited Apr 16, 2012 at 11:21

answered Apr 16, 2012 at 11:06

Okan Kocyigit

13.5k18 gold badges74 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user1211185 Over a year ago

can you please show me how I can use the switch condition to see it the current href value is this "#tab1" then set it to "tab2". Thanks in Advance.

Jayanga Over a year ago

@user1211185 If this is the correct answer to your question you should mark this as the answer

user1211185 Over a year ago

Hi Jayanga, I tried to mark it but it says I can mark it after 10 minutes may be I don't have enough reputations. thanks

David Thomas Over a year ago

It's your question, you can accept any answer to any of your own question(s) (which rewards you with a measure of rep). All you have to do is wait for the timer to clear and allow you to do so.

user1211185 Over a year ago

@ocanal no I have 7 tabs on my page and there is no previous button at the moment. I am just moving forward.

Joberror · Accepted Answer · 2012-04-16 11:29:45Z

1

$("a.tabs").click(function() {
    this.href = 'newhref';
    return false;
});

It is more efficient this way compared to @ocanal solution.

Source:

http://net.tutsplus.com/tutorials/javascript-ajax/14-helpful-jquery-tricks-notes-and-best-practices/

edited Apr 16, 2012 at 11:29

answered Apr 16, 2012 at 11:23

Joberror

5,8903 gold badges22 silver badges15 bronze badges

3 Comments

David Thomas Over a year ago

If you're going to make that claim, might I recommend you pay a visit to JS Perf and provide support/evidence? (You're right, but...y'know, cite your sources. =))

Joberror Over a year ago

@DavidThomas. The source... net.tutsplus.com/tutorials/javascript-ajax/…

Okan Kocyigit Over a year ago

"Please note that there are three attributes that should always be accessed, via jQuery: “src,” “href,” and “style.” These attributes require the use of getAttribute in older versions of IE."

Collectives™ on Stack Overflow

How to change HTML link's href property dynamically

2 Answers 2

5 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related