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
})
});
精彩评论