开发者

Stopping onClick from returning the page top the top after jQuery events

I've read many posts here regarding this issue, with great solutions, however, none of them seem to work in my case.

Here is my JS:

$(document).ready(function(){
    $("a.tab").click(function () {
        $(".active").removeClass("active");
        $(this).addClass("active");
        $(".inside ul").fadeOut();
        $(".inside ul").fadeIn();
        var content_show = $(this).attr("title");
        return false;
        e.preventDefault();
    });
    $("a.tab, h4").FontEffect({
        outline: true
    })
});

What am I doing wrong?

UPDATE:

Thanks for the assistance. Now I have the following, tho it is still not working:

$(document).ready(function(){
        $("a.tab").click(function(e) {
            e.preventDefault();
            $(".active").removeClass("active");
            $(this).addClass("active");
            $(".inside ul").fadeOut();
            $(".inside ul").fadeIn();
            var content_show = $(this).attr("title");
            return开发者_JAVA百科 false;
        });
        //$("a.tab, h4").FontEffect({
        //  outline: true
    //  })
    });

ANCHOR TAG:

<a href="#" title="content_1" class="tab active">New Videos</a>

VIEWABLE


Try:

 $("a.tab").click(function (e) {

In the code you are missing the event argument variable which in this case would be the e.

If you are suing preventDefault() method there is no need to use return false.

online demo: http://jsfiddle.net/dcFT7/

UPDATE

The scroll jump is not caused by the click on the link, it is caused because when the ul is hidden $(".inside ul").fadeOut() the page height gets smaller thus the browser scrolls to the top.

This i can be fixed by using .animate({ opacity: 0 }, 500) to do the fadeOut effect without hiding it.

$("a.tab").click(function (e) {
    ...
    $(".inside ul").animate({opacity:0},500);
    $(".inside ul").fadeIn();
    ...
    e.preventDefault();
});


the trouble is ur returning before ur preventing the default action (e.preventDefault();), try this:

    $("a.tab").click(function (e) {
        e.preventDefault();
        $(".active").removeClass("active");
        $(this).addClass("active");
        $(".inside ul").fadeOut();
        $(".inside ul").fadeIn();
        var content_show = $(this).attr("title");
        return false;
    });

and on the anchor tags make sure the href is of the form:

href='javascript:void(0);'


Might it be as simple as "e.preventDefault();" being on the wrong line?

$(document).ready(function(){
        $("a.tab").click(function () {
            e.preventDefault();
            $(".active").removeClass("active");
            $(this).addClass("active");
            $(".inside ul").fadeOut();
            $(".inside ul").fadeIn();
            var content_show = $(this).attr("title");
            return false;

        });
        $("a.tab, h4").FontEffect({
            outline: true
        })
    });
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜