加载时位置错误

我的页面上有一个JavaScript滑出式菜单。当页面加载菜单显示在错误的地方并且被打开（它应该默认关闭）。一旦页面加载完成，它会跳转到正确的位置和状态。加载时位置错误

我想菜单要么加载最后或在正确的位置开始。我试图让隐藏菜单的样式显示为使用JavaScript加载页面时的块，但菜单仅保持隐藏状态。

<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';">

，然后CSS

.slide-out-div { 
display: none; 
padding-left: 0px; 
width: 200px; 
z-index: 3; 
position: relative; 
}

来源

2011-09-18 Andrew Smart

是包含在你页面的'head'你的JavaScript，或者是它的内容之后？ – Eric

_“我尝试了将菜单的样式隐藏起来，并将其显示为使用JavaScript加载页面时的块，但菜单只是隐藏起来。”_ - 我们可以看到一些代码吗？ – Eric

您的专用解决方案（通过JS隐藏/关闭，并通过JS打开后者）对我来说似乎很好。我们将无法神奇地找出错误或其他错误，从而阻止它正常工作:)您是否可以尝试制作一个最小的功能示例来展示您的问题？ – hugomg

一个可能的解决方案可能是这一点。在HTML的<head>补充：

<script>document.documentElement.className += ' js'</script>

这将添加一个 “JS” 级到<html>元素。

接下来，在您的css文件中按照正常方式样式化菜单，但是之后立即通过添加.js类来隐藏它。例如：

.menu { /* your normal styling goes here */ } 
.js .menu { display: none; }

这可以确保您的菜单是在做客户表示，不管出于什么原因，不支持JavaScript，但隐藏在做支持JavaScript客户端。

接下来，调整您的JavaScript文件以在需要时显示滑出式菜单。

来源

2011-09-18 20:34:55 Matijs

今天早上看着这个用新鲜的眼睛，刚刚意识到我正在使用试图在我的Javascript中使用一个类，而不是一个ID。

我从这个

<body onload="javascript:document.getElementByClass('slide-out-div').style.display = 'block';">

改变这种

<body onload="javascript:document.getElementById('menu').style.display = 'block';">

来源

2011-09-19 07:15:19

加载时位置错误

回答

相关问题