Jquery 如何正确使用(文件)。准备好了吗?
请参阅下面的页面标题 当我打电话时Jquery 如何正确使用(文件)。准备好了吗?,jquery,document-ready,megamenu,Jquery,Document Ready,Megamenu,请参阅下面的页面标题 当我打电话时 jkmegamenu.definemenu("megaanchor0", "megamenu0", "mouseover"); jkmegamenu.definemenu("megaanchor2", "megamenu2", "mouseover"); jkmegamenu.definemenu("megaanchor3", "megamenu3", "mouseover"); jkmegamenu.definemenu("m
jkmegamenu.definemenu("megaanchor0", "megamenu0", "mouseover");
jkmegamenu.definemenu("megaanchor2", "megamenu2", "mouseover");
jkmegamenu.definemenu("megaanchor3", "megamenu3", "mouseover");
jkmegamenu.definemenu("megaanchor4", "megamenu4", "mouseover");
对于没有文档准备的页面,mega菜单工作正常。当我在doc ready函数中调用时,菜单不会加载
有什么想法吗?(见附件)
美国的警报
$(文档).ready(函数(){
jkmegmenu.definemenu(“megaanchor0”、“megamenu0”、“mouseover”);
jkmegmenu.definemenu(“megaanchor2”、“megamenu2”、“鼠标悬停”);
jkmegmenu.definemenu(“megaanchor3”、“megamenu3”、“鼠标悬停”);
jkmegmenu.definemenu(“megaanchor4”、“megamenu4”、“鼠标悬停”);
});
$('#mainbanner').ready(函数(){
$(“#幻灯片”).slidesjs({
宽度:842,
身高:325,
播放:{
活动:错误,
//[布尔]生成播放和停止按钮。
//您不能使用自己的按钮。对不起。
效果:“褪色”,
//[字符串]可以是“滑动”或“淡入”。
间隔时间:2000年,
//[数字]每张幻灯片花费的时间(毫秒)。
是的,
//[布尔值]开始在加载时播放幻灯片。
pauseOnHover:是的,
//[布尔值]在悬停状态下暂停播放幻灯片
重启延迟:2500,
//[编号]在非活动幻灯片上重新启动延迟
},
导航:错误
});
});
还有html
<li><a href="#" id='megaanchor0'>Residential</a></li>
<span id="megamenu0" class="megamenu">
<div class="column">
<ul>
<li><a href='#'>Home Security with Fire Protection</a></li>
<li><a href='#'>Video Surveillance</a></li>
<li><a href='#'>Phone, Cable, Office and Satellite Wiring & Trim</a></li>
<li><a href='#'>TV Purchase & Installation</a></li>
<li><a href='#'>No Phone Required Systems</a></li>
<li><a href='#'>Look-in Video Systems</a></li>
</ul>
</div>
<div class="column">
<ul>
<li><a href='#'>Remote Access to Securty System</a></li>
<li><a href='#'>Computer and Smart Phone Apps</a></li>
<li><a href='#'>Blue Alert Home Healthcare System</a></li>
<li><a href='#'>Security Screens</a></li>
<li><a href='#'>Cell Back-up Systems using Tellular or Uplink</a></li>
<li><a href='#'>SAFEGUARD Inspection Service</a></li>
</ul>
</div>
</span>
我会在页面末尾执行单个document.ready()
调用,如下所示:
<script type="text/javascript">
$(document).ready(function() {
jkmegamenu.definemenu("megaanchor0", "megamenu0", "mouseover");
jkmegamenu.definemenu("megaanchor2", "megamenu2", "mouseover");
jkmegamenu.definemenu("megaanchor3", "megamenu3", "mouseover");
jkmegamenu.definemenu("megaanchor4", "megamenu4", "mouseover");
$("#slides").slidesjs({
width: 842,
height: 325,
play: {
active: false,
// [boolean] Generate the play and stop buttons.
// You cannot use your own buttons. Sorry.
effect: "fade",
// [string] Can be either "slide" or "fade".
interval: 2000,
//[number] Time spent on each slide in milliseconds.
auto: true,
//[boolean] Start playing the slideshow on load.
pauseOnHover: true,
// [boolean] pause a playing slideshow on hover
restartDelay: 2500,
// [number] restart delay on inactive slideshow
},
navigation: false
});
});
</script>
$(文档).ready(函数(){
jkmegmenu.definemenu(“megaanchor0”、“megamenu0”、“mouseover”);
jkmegmenu.definemenu(“megaanchor2”、“megamenu2”、“鼠标悬停”);
jkmegmenu.definemenu(“megaanchor3”、“megamenu3”、“鼠标悬停”);
jkmegmenu.definemenu(“megaanchor4”、“megamenu4”、“鼠标悬停”);
$(“#幻灯片”).slidesjs({
宽度:842,
身高:325,
播放:{
活动:错误,
//[布尔]生成播放和停止按钮。
//您不能使用自己的按钮。对不起。
效果:“褪色”,
//[字符串]可以是“滑动”或“淡入”。
间隔时间:2000年,
//[数字]每张幻灯片花费的时间(毫秒)。
是的,
//[布尔值]开始在加载时播放幻灯片。
pauseOnHover:是的,
//[布尔值]在悬停状态下暂停播放幻灯片
重启延迟:2500,
//[编号]在非活动幻灯片上重新启动延迟
},
导航:错误
});
});
使用当前代码,您正在定义
document.ready()
上的菜单,以便在加载所有html并将其添加到DOM时添加它们。但是当#mainbanner
加载到document.ready()
之前时,您就会调用slideJS,这就是为什么将它们放在同一个调用中并按正确的顺序应该可以解决您的问题。结果表明,我在加载样式之前加载了javascript。我换了那些,现在一切都好了:D
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Alarm of America</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="java/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="java/jkmegamenu.js"></script>
<script type="text/javascript">
$(document).ready(function() {
jkmegamenu.definemenu("megaanchor0", "megamenu0", "mouseover");
jkmegamenu.definemenu("megaanchor2", "megamenu2", "mouseover");
jkmegamenu.definemenu("megaanchor3", "megamenu3", "mouseover");
jkmegamenu.definemenu("megaanchor4", "megamenu4", "mouseover");
});
</script>
<script type="text/javascript" src="java/slides.js"></script>
<script type="text/javascript" src="curvycorners.src.js"></script>
<script type="text/javascript">
$('#mainbanner').ready(function() {
$("#slides").slidesjs({
width: 842,
height: 325,
play: {
active: false,
// [boolean] Generate the play and stop buttons.
// You cannot use your own buttons. Sorry.
effect: "fade",
// [string] Can be either "slide" or "fade".
interval: 2000,
// [number] Time spent on each slide in milliseconds.
auto: true,
// [boolean] Start playing the slideshow on load.
pauseOnHover: true,
// [boolean] pause a playing slideshow on hover
restartDelay: 2500,
// [number] restart delay on inactive slideshow
},
navigation: false
});
});
</script>
</head>
美国的警报
$(文档).ready(函数(){
jkmegmenu.definemenu(“megaanchor0”、“megamenu0”、“mouseover”);
jkmegmenu.definemenu(“megaanchor2”、“megamenu2”、“鼠标悬停”);
jkmegmenu.definemenu(“megaanchor3”、“megamenu3”、“鼠标悬停”);
jkmegmenu.definemenu(“megaanchor4”、“megamenu4”、“鼠标悬停”);
});
$('#mainbanner').ready(函数(){
$(“#幻灯片”).slidesjs({
宽度:842,
身高:325,
播放:{
活动:错误,
//[布尔]生成播放和停止按钮。
//您不能使用自己的按钮。对不起。
效果:“褪色”,
//[字符串]可以是“滑动”或“淡入”。
间隔时间:2000年,
//[数字]每张幻灯片花费的时间(毫秒)。
是的,
//[布尔值]开始在加载时播放幻灯片。
pauseOnHover:是的,
//[布尔值]在悬停状态下暂停播放幻灯片
重启延迟:2500,
//[编号]在非活动幻灯片上重新启动延迟
},
导航:错误
});
});
美元(document).ready()的格式没有问题。。。你的控制台怎么说?使用$(document).ready()它不需要在页面的末尾。你能把我的修改发布到什么地方吗?所以我可以检查它。结果是样式表。我在javascript之后加载它,这是有问题的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Alarm of America</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="java/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="java/jkmegamenu.js"></script>
<script type="text/javascript">
$(document).ready(function() {
jkmegamenu.definemenu("megaanchor0", "megamenu0", "mouseover");
jkmegamenu.definemenu("megaanchor2", "megamenu2", "mouseover");
jkmegamenu.definemenu("megaanchor3", "megamenu3", "mouseover");
jkmegamenu.definemenu("megaanchor4", "megamenu4", "mouseover");
});
</script>
<script type="text/javascript" src="java/slides.js"></script>
<script type="text/javascript" src="curvycorners.src.js"></script>
<script type="text/javascript">
$('#mainbanner').ready(function() {
$("#slides").slidesjs({
width: 842,
height: 325,
play: {
active: false,
// [boolean] Generate the play and stop buttons.
// You cannot use your own buttons. Sorry.
effect: "fade",
// [string] Can be either "slide" or "fade".
interval: 2000,
// [number] Time spent on each slide in milliseconds.
auto: true,
// [boolean] Start playing the slideshow on load.
pauseOnHover: true,
// [boolean] pause a playing slideshow on hover
restartDelay: 2500,
// [number] restart delay on inactive slideshow
},
navigation: false
});
});
</script>
</head>