我自己试图这样做,但我想我不够熟练,我放弃尝试并前来寻求帮助。 我在一个单页的网站上为我的菜单编写了这个脚本。
$(document).ready(function () {
$(document).on("scroll", onScroll);
//MENU
$('.menu ul li a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).attr('id', '');
})
$(this).attr('id', 'active');
var target = this.hash;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 1000, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPosition = $(document).scrollTop();
$('a').each(function () {
var currentLink = $(this);
var refElement = $(currentLink.attr("href"));
if (refElement.position().top <= scrollPosition && refElement.position().top + refElement.height() > scrollPosition) {
$('.menu ul li a').attr("id", "");
currentLink.attr("id", "active");
}
else{
currentLink.attr("id", "");
}
});
}
它完全符合我的要求,但我的网站也有链接,我希望他们也这样做。
我自己做了,但是两个脚本相互合并,它也将class active
应用于链接。当我试图改变这种情况时,它正在运行,但它没有在菜单上应用class active
......
我真的很困惑,我也不是一个js / jquery程序员。
有人可以就如何分离脚本提出建议吗?例如:<a href="#contactos" class="solicitar_visita"><span>SOLICITE A NOSSA VISITA</span></a>
。这会将用户发送到div contactos
,但它没有动画,我希望它能够这样做。
有什么想法吗?
编辑:对于第二个脚本,我不想应用任何active class
。只需滑动到所需的div
。
$(document).ready(function () {
$(document).on("scroll", onScroll);
//MENU
$('.menu ul li a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).attr('id', '');
})
$(this).attr('id', 'active');
var target = this.hash;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 1000, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
//OTHER LINKS
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
var target = this.hash;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 1000, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPosition = $(document).scrollTop();
$('a').each(function () {
var currentLink = $(this);
var refElement = $(currentLink.attr("href"));
if (refElement.position().top <= scrollPosition && refElement.position().top + refElement.height() > scrollPosition) {
$('.menu ul li a').attr("id", "");
currentLink.attr("id", "active");
}
else{
currentLink.attr("id", "");
}
});
}
但“OTHER LINKS”脚本会干扰菜单脚本。我不知道我做得对不对,我所知道的是我做的方式,它不起作用。
答案 0 :(得分:0)
您可以使用 addClass 和 removeClass 代替attr。
UPDATE my_table SET timestamp [countOfArray] = newDate;