加載時位置錯誤

我的頁面上有一個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

加載時位置錯誤

回答

相關問題