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

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

• javascript
• jquery
• html
• asp-mvc-3
• jquery-ui

• Use JS on the click event <input id="SubmitBtn" type="submit" value="Next" onclick="changeUrls();" /> – siva Commented Apr 16, 2012 at 11:07
• 2 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 Commented Apr 16, 2012 at 11:07
• 1 Why do you have a submit button within an a-tag? – stUrb Commented Apr 16, 2012 at 11:10
• 2 Your HTML is invalid. <a> elements cannot contain interactive content. – Quentin Commented Apr 16, 2012 at 11:26
• 1 @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 Commented Apr 16, 2012 at 11:59

2 Answers 2

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

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

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

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

Source:

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