我的公司要求我在Internet中查看后页http://waxy.cloudtelephones.co.uk/departments/#voice上的一个问题(肯定是IE9,我想它会产生7-10的效果)。
问题如下--当单击页面上的任何主要链接(“区段”菜单--语音、连接性、云、移动或每个部分中的子菜单--Call&Line、宿主VoIP、ISD.等)时,jquery会被激发以显示相关部分,在Chrome、FF和Safari中,所有操作都没有问题,但是在运行ScrollTop命令之前,IE窗口中会暂时闪烁定位标签。
下面提供了Javascript代码示例,任何帮助都将不胜感激。
//hash control
if(window.location.hash) {
var hash = window.location.hash.substring(1);
var selected = "." + hash;
var parents = [ "voice", "mobile", "cloud-services", "connectivity"];
if ($.inArray(hash, parents) != -1) {
$('html, body').animate({"scrollTop":"0"});
$(selected).show();
$('#buttom-nav ul li#' + hash).addClass('selected');
$(selected + " aside.sub-menu").slideDown('slow');
$(selected + " .child-menu li:first").addClass('selected');
$(selected + " .child-page:first").delay(1000).fadeIn('slow');
};
if ($.inArray(hash, parents) == -1) {
var parent = $(selected).closest('.dptmnts').attr('class').split(' ')[2];
$('html, body').animate({"scrollTop":"0"});
$(selected).closest('.dptmnts').show();
$('.child-menu li#' + hash).addClass('selected');
$('#buttom-nav ul li#' + parent).addClass('selected');
$(selected).siblings('aside.sub-menu').slideDown('slow');
$(selected).fadeIn('slow').delay(1000).fadeIn('slow');
};
};
//hash change control
$(window).bind('hashchange', function () {
var hash = window.location.hash.substring(1);
var selected = "." + hash;
var parents = [ "voice", "mobile", "cloud-services", "connectivity"];
if ($.inArray(hash, parents) != -1) {
$(document).scrollTop(0);
$("aside.sub-menu:visible").slideUp('fast');
$(".child-page:visible").fadeOut('fast');
$(".dptmnts:visible").delay(1000).hide('fast');
$('#buttom-nav ul li').removeClass('selected');
$('.child-menu li').removeClass('selected');
$('.child-menu li#' + hash).addClass('selected');
$(selected).fadeIn('fast');
$('#buttom-nav ul li#' + hash).addClass('selected');
$(selected + " aside.sub-menu").delay(500).slideDown('slow');
$(selected + " .child-menu li:first").addClass('selected');
$(selected + " .child-page:first").delay(500).fadeIn('slow');
};
if ($.inArray(hash, parents) == -1) {
var parent = $(selected).closest('.dptmnts').attr('class').split(' ')[2];
$(document).scrollTop(0);
$(".child-page:visible").fadeOut('fast');
$('.child-menu li').removeClass('selected');
$('.child-menu li#' + hash).addClass('selected');
$(selected).delay(500).fadeIn('slow');
};
});
$( ".page-departments #content a" ).not('.pop-up').click(function(event) {
event.preventDefault()
window.location.hash = this.hash;
$(document).scrollTop(0);
return false;
});最后一件事-我认为问题可能是两个哈希事件(加载和更改)之间的冲突,以及点击函数都调用scrollTop,然而,我已经尝试完全删除单击函数,而不是解决问题,它使相同的‘闪烁’出现在Chrome,FF和Safari!
发布于 2013-11-25 15:42:04
$(window).bind('hashchange', function (e) {
e.preventDefault();
// rest of your code防止hashchange事件的默认操作。
还记得将e参数添加到函数中。
https://stackoverflow.com/questions/20197033
复制相似问题