Javascript 加载时Div处于错误位置
我的页面上有一个JavaScript滑出菜单。当页面加载时,菜单显示在错误的位置,并且在打开时,默认情况下应将其关闭。一旦页面加载完毕,它就会跳转到正确的位置和状态 我希望菜单要么最后加载,要么在正确的位置开始。我已经尝试过隐藏菜单的样式,并使用JavaScript将其显示为页面加载时的块,但菜单只是保持隐藏状态Javascript 加载时Div处于错误位置,javascript,html,Javascript,Html,我的页面上有一个JavaScript滑出菜单。当页面加载时,菜单显示在错误的位置,并且在打开时,默认情况下应将其关闭。一旦页面加载完毕,它就会跳转到正确的位置和状态 我希望菜单要么最后加载,要么在正确的位置开始。我已经尝试过隐藏菜单的样式,并使用JavaScript将其显示为页面加载时的块,但菜单只是保持隐藏状态 <link rel="stylesheet" type="text/css" media="all" href="<css/style.css" /> <lin
<link rel="stylesheet" type="text/css" media="all" href="<css/style.css" />
<link rel="stylesheet" type="text/css" media="all" href="</css/reset.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tabSlideOut.v1.3.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle',
pathToTabImage: 'images/closed_menu.png', //class of the element that will become your tab
imageHeight: '230px', //height of tab image //Optionally can be set using css
imageWidth: '62px', //width of tab image //Optionally can be set using css
tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left
speed: 600, //speed of animation
action: 'hover', //options: 'click' or 'hover', action to trigger animation
topPos: '270px', //position from the top/ use if tabLocation is left or right
leftPos: '30px', //position from left/ use if tabLocation is bottom or top
fixedPosition: false //options: true makes it stick(fixed position) on scroll
});
$("div.slide-out-div").mouseover(function(){
$('.handle').css("background-image", "url(images/open_menu.png)");
}).mouseout(function(){
$('.handle').css("background-image", "url(images/closed_menu.png)");
});
$('#sliderimages').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
next: '#next',
prev: '#prev'
});
});
</script>
<body onload="javascript:document.getElementByClass('slide-out-div').style.display = 'block';">
一个可能的解决办法可能是这样。在您的html页面中添加: document.documentElement.className+='js' 这将在元素上添加一个js类 接下来,在css文件中,按照通常的方式设置菜单样式,但之后立即通过添加.js类将其隐藏。例如:
.menu { /* your normal styling goes here */ }
.js .menu { display: none; }
这可以确保您的菜单显示在不支持JavaScript的客户端中,而隐藏在支持JavaScript的客户端中
接下来,根据需要调整JavaScript文件以显示滑出菜单。今天早上用新鲜的眼光看了这一点,才意识到我在JavaScript中使用的是类,而不是ID 我改变了
<body onload="javascript:document.getElementByClass('slide-out-div').style.display = 'block';">
对此
<body onload="javascript:document.getElementById('menu').style.display = 'block';">
您的javascript是否包含在页面的标题中,还是在内容之后?我已尝试使用javascript将菜单样式隐藏,并将其显示为页面加载时的块,但菜单始终保持隐藏状态。-我们能看到一些代码吗?我觉得你的解决方案是通过JS隐藏/关闭故障并打开后者。我们无法神奇地找出您所做的哪些错字或其他错误阻止了它的工作:您能试着制作一个最小的功能示例来展示您的问题吗?嗨,伙计们,我已经编辑了我的帖子以包含代码
<body onload="javascript:document.getElementById('menu').style.display = 'block';">