javascript - Use JQuery preventDefault(), but still add the path to the URL - Stack Overflow

admin管理员组

文章数量:1390531

I am working on a website where clicking on a certain link will slide down a login panel. I am using event.preventDefault() to stop the site from redirecting as well as an animation event to slide the panel down. When the link is clicked, the panel slides down and the url remains unchanged.

What I want to happen when the link is clicked is for the panel to animate as normal, but for the href attribute of the link to be shown in the url. In this case it would be something like this: http://domain_name/#login.

Here is the code I've got going right now:

$("#login_link").click(function (e) {
    e.preventDefault();
    $("#login").animate({ 'margin-top': 0 }, 600, 'linear');

    window.location.hash = $(this).attr('href');
});

This code successfully adds the '#login' to the url as desired, but it skips the animation of the login panel. When clicking the link the panel just appears instantly. I would like to keep both the animation and the updated url behaviors. Is this possible?

I am working on a website where clicking on a certain link will slide down a login panel. I am using event.preventDefault() to stop the site from redirecting as well as an animation event to slide the panel down. When the link is clicked, the panel slides down and the url remains unchanged.

What I want to happen when the link is clicked is for the panel to animate as normal, but for the href attribute of the link to be shown in the url. In this case it would be something like this: http://domain_name/#login.

Here is the code I've got going right now:

$("#login_link").click(function (e) {
    e.preventDefault();
    $("#login").animate({ 'margin-top': 0 }, 600, 'linear');

    window.location.hash = $(this).attr('href');
});

This code successfully adds the '#login' to the url as desired, but it skips the animation of the login panel. When clicking the link the panel just appears instantly. I would like to keep both the animation and the updated url behaviors. Is this possible?

• javascript
• jquery
• preventdefault

Share Improve this question Follow edited Aug 7, 2011 at 7:30 user447356 asked Aug 7, 2011 at 6:02 JGDevJGDev 26111 gold badge44 silver badges88 bronze badges 3

• This may be a silly question, but are you sure the jquery animation is working when the window.location.hash line of code is mented out? – Justin Beckwith Commented Aug 7, 2011 at 6:10
• 4 Could you accept answers to questions you have asked? I'm sure at least a few of them have decent answers... people generally like recognition for their work. – beatgammit Commented Aug 7, 2011 at 6:16
• what happens when you just omit the e.preventDefault() line? – user447356 Commented Aug 7, 2011 at 7:30

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

use below code . just call the hash in animation pleted event.

$("#login_link").click(function (e) {
    e.preventDefault();
    $("#login").animate({ 'margin-top': 0 }, 600, 'linear', function(){  window.location.hash = $(this).attr('href'); });

});

I am not sure but you may bee looking for this feature

1> when some body clicks login, url changes to abc./#login, and login panel animation occurs

or

2 > when some body just types abc./#login in url, you expect the same behavior (animation of login panel).

What you are doing currently will work only for case1 and wont work for case2. If you want animation (or whatever) to work both, when clicked , or just url typed. You need some mechanism to detect hash changes.

There is a famous plugin http://benalman./projects/jquery-bbq-plugin/

Go and see this plugin and, look how things are done. If you find anything tough to understand we are here!!

本文标签： javascriptUse JQuery preventDefault()but still add the path to the URLStack Overflow