加载时Div位置错误

Div in wrong position while loading

本文关键字：错误 位置 Div 加载      更新时间：2023-09-26

我的页面上有一个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;
}

一个可能的解决方案是这样的。在你的html的<head>添加:

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

这将在<html>元素上添加一个"js"类。

接下来，在你的css文件样式你的菜单，你通常会，但立即之后，通过添加.js类隐藏它。例如:

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

这可以确保你的菜单显示在不支持JavaScript的客户端中，而隐藏在支持JavaScript的客户端中。

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

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

I changed from this

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


<body onload="javascript:document.getElementById('menu').style.display = 'block';">
相关文章：