Onclick change url using jquery

Question

I am trying to change a url using jquery.

So once the button is clicked it will change the parent url but it will not redirect.

For example, If the url is,

http://www.xyz.com then it will become http://www.xyz.com/abc but will not be redirected.

My Code:

$('.clickme').click(function () {
    window.location.hash = 'xyz';
});

Is it at all possible?

Please suggest.

JSfiddle : http://jsfiddle.net/squidraj/Tn8BW/3/

Yes it is possible. Show us your code so far and we will see where you went wrong. Also do you mean the URL on the anchor tag or the URL in the address bar? — Huangism
– Huangism, Commented Dec 9, 2013 at 16:26

aksu · Accepted Answer · 2013-12-09 16:38:53Z

27

Javascript can luckilly modify browser's history, and change the url. This example will add new row to your browser's history, and you are able to use back button to go to that page.

HTML:

<a href="http://www.xyz.com/abc" id="link">abc</a>

jQuery:

$('#link').click(function() {
   window.history.pushState('obj', 'newtitle', '/abc');
   return false;
});

Or if you want to use url hashes(like in your code):

$('#link').click(function () {
    window.location.hash = 'xyz';
    return false;
});

That will not redirect, it stays on the page.

answered Dec 9, 2013 at 16:38

aksu

5,2365 gold badges26 silver badges39 bronze badges

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

9 Comments

Prithviraj Mitra Over a year ago

Thanks @aksu. In first example is it supported by all browsers/versions?

aksu Over a year ago

It's supported pretty generally, even in some of the mobile browsers! you can check more on caniuse.com/#feat=history.

aksu Over a year ago

Search engines ingnore hashtags, so they will not indexed. You can read more on that blog phoenixrealm.com/the-power-of-the-hash-in-seo

Dunstkreis Over a year ago

I would downvote, but my reputation is to low... never ever use "return false" for this.What you want to do is "event.preventDefault()"!

aksu Over a year ago

It's easier to remember.

|

marvwhere · Accepted Answer · 2013-12-09 16:35:43Z

3

instead of window.location you need to modify the history

example code

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

answered Dec 9, 2013 at 16:35

marvwhere

5713 silver badges11 bronze badges

Collectives™ on Stack Overflow

Onclick change url using jquery

2 Answers 2

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related