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