这个问题可能更多的是语法问题而不是其他问题。我有一些简单的代码可以控制一些自定义选项卡，这些选项卡在单击时可以在屏幕上显示。在大多数情况下，代码（尤其是动画）按预期工作，并且没有问题。
<script type="text/javascript">
$('.side_drawer_face').click(function() {
if ($('#side_drawer').css("left") <= "0"){
$('#overlay_div').show();
document.getElementById('side_drawer').style.zIndex = 6000;
document.getElementById('side_drawer2').style.zIndex = 5000;
$('#side_drawer').animate({ opacity: 1.0, left: '+=406'}, 500);
$('#side_drawer2').animate({ opacity: 1.0, left: '+=406'}, 500);
} else if ($('#side_drawer').css("z-index") == "6000"){
$('#overlay_div').hide();
$('#side_drawer').animate({ opacity: 1.0, left: '-=406'}, 500);
$('#side_drawer2').animate({ opacity: 1.0, left: '-=406'}, 500);
document.getElementById('side_drawer').style.zIndex = 6000;
document.getElementById('side_drawer2').style.zIndex = 5000;
} else {
document.getElementById('side_drawer').style.zIndex = 6000;
document.getElementById('side_drawer2').style.zIndex = 5000;
}
});
$('.side_drawer_face2').click(function() {
//shows Bio div
if ($('#side_drawer2').css("left") <= "0"){
$('#overlay_div').show();
document.getElementById('side_drawer2').style.zIndex = 6000;
document.getElementById('side_drawer').style.zIndex = 5000;
$('#side_drawer').animate({ opacity: 1.0, left: '+=406'}, 500);
$('#side_drawer2').animate({ opacity: 1.0, left: '+=406'}, 500);
} else if ($('#side_drawer2').css("z-index") == "6000"){
$('#overlay_div').hide();
$('#side_drawer').animate({ opacity: 1.0, left: '-=406'}, 500);
$('#side_drawer2').animate({ opacity: 1.0, left: '-=406'}, 500);
} else {
document.getElementById('side_drawer2').style.zIndex = 6000;
document.getElementById('side_drawer').style.zIndex = 5000;
}
});
$('.clear_overlay').click(function() {
$('#overlay_div').hide();
$('#side_drawer').animate({ opacity: 1.0, left: '-=406'}, 500);
$('#side_drawer2').animate({ opacity: 1.0, left: '-=406'}, 500);
document.getElementById('side_drawer2').style.zIndex = 5000;
document.getElementById('side_drawer').style.zIndex = 6000;
});
</script>
我的问题是，在某些浏览器中（以I开头并以E结尾）快速单击选项卡，而其他页面元素正在加载时会导致意外行为。我想要做的是用文档就绪语句包装整个脚本，这样在页面上的所有内容都加载之前，不能执行任何函数。 （该脚本已经位于html主体的底部）
答案 0 :(得分：0)
$(document).ready(function() {
$('.side_drawer_face').click(function() {
if ($('#side_drawer').css("left") <= "0"){
$('#overlay_div').show();
document.getElementById('side_drawer').style.zIndex = 6000;
document.getElementById('side_drawer2').style.zIndex = 5000;
$('#side_drawer').animate({ opacity: 1.0, left: '+=406'}, 500);
$('#side_drawer2').animate({ opacity: 1.0, left: '+=406'}, 500);
} else if ($('#side_drawer').css("z-index") == "6000"){
$('#overlay_div').hide();
$('#side_drawer').animate({ opacity: 1.0, left: '-=406'}, 500);
$('#side_drawer2').animate({ opacity: 1.0, left: '-=406'}, 500);
document.getElementById('side_drawer').style.zIndex = 6000;
document.getElementById('side_drawer2').style.zIndex = 5000;
} else {
document.getElementById('side_drawer').style.zIndex = 6000;
document.getElementById('side_drawer2').style.zIndex = 5000;
}
});
$('.side_drawer_face2').click(function() {
//shows Bio div
if ($('#side_drawer2').css("left") <= "0"){
$('#overlay_div').show();
document.getElementById('side_drawer2').style.zIndex = 6000;
document.getElementById('side_drawer').style.zIndex = 5000;
$('#side_drawer').animate({ opacity: 1.0, left: '+=406'}, 500);
$('#side_drawer2').animate({ opacity: 1.0, left: '+=406'}, 500);
} else if ($('#side_drawer2').css("z-index") == "6000"){
$('#overlay_div').hide();
$('#side_drawer').animate({ opacity: 1.0, left: '-=406'}, 500);
$('#side_drawer2').animate({ opacity: 1.0, left: '-=406'}, 500);
} else {
document.getElementById('side_drawer2').style.zIndex = 6000;
document.getElementById('side_drawer').style.zIndex = 5000;
}
});
$('.clear_overlay').click(function() {
$('#overlay_div').hide();
$('#side_drawer').animate({ opacity: 1.0, left: '-=406'}, 500);
$('#side_drawer2').animate({ opacity: 1.0, left: '-=406'}, 500);
document.getElementById('side_drawer2').style.zIndex = 5000;
document.getElementById('side_drawer').style.zIndex = 6000;
});
});
Nick和Matt的评论是正确的 - 语法非常简单，只需绑定ready函数中的事件处理程序