JS无法正确显示加载的页面
JS does not correctly display a loaded page
我制作了一个菜单来加载(无需刷新页面)div中的页面(id="main-content"),除了滑块之外一切都在工作,有JS代码:
jQuery(document).ready(function(){
// load index page when the page loads
jQuery("#main-content").load("/tpl/index.tpl.php");
jQuery("#index").click(function(){
// load home page on click
jQuery("#main-content").load("/tpl/index.tpl.php");
});
jQuery("#about").click(function(){
// load about page on click
jQuery("#main-content").load("about.html");
});
jQuery("#contact").click(function(){
// load contact form onclick
jQuery("#main-content").load("contact.html");
});
});
有一部分索引代码(带有div主要内容):
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="css/global.css" media="all">
<link rel="stylesheet" href="style.css" media="all">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="all" />
<![endif]-->
<link rel="shortcut icon" href="images/favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,200,300,300italic,200italic,400italic,600italic,600,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
</head>
<body class="dark-footer flx-home-page-4">
<div id="main-content">
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/superfish.js"></script>
<script src="js/retina.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jquery.form.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/jquery.nivo.slider.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script src="js/jquery.carouFredSel-5.6.4.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<script src="js/jflickrfeed.min.js"></script>
<script src="js/mediaelement-and-player.min.js"></script>
<script src="js/modernizr.custom.63321.js"></script>
<script src="js/jquery.hoverdir.js"></script>
<script src="js/jquery.dropdown.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/jquery.dlmenu.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script src="js/jquery.eislideshow.js"></script>
<script src="js/raphael-min.js"></script>
<script src="js/iview.js"></script>
<script src="js/tweetable.jquery.js"></script>
<script src="js/jquery.timeago.js"></script>
<script src="js/custom.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.quicksand.js"></script>
<script src="js/main.js"></script>
<script src="js/bra_social_media.js"></script>
<script src="js/jquery.themepunch.plugins.min.js"></script>
<script src="js/jquery.themepunch.revolution.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/cbpAnimatedHeader.min.js"></script>
<script src="js/styleswitch.js"></script>
<script src="js/loader.js"></script>
<script type="text/javascript">
var tpj=jQuery;
tpj.noConflict();
tpj(document).ready(function() {
if (tpj.fn.cssOriginal!=undefined)
tpj.fn.css = tpj.fn.cssOriginal;
tpj('.fullwidthbanner').revolution(
{
delay:9000,
startwidth:1000,
startheight:500,
onHoverStop:"on", // Stop Banner Timet at Hover on Slide on/off
thumbWidth:100, // Thumb With and Height and Amount (only if navigation Tyope set to thumb !)
thumbHeight:50,
thumbAmount:3,
hideThumbs:0,
navigationType:"bullet", // bullet, thumb, none
navigationArrows:"solo", // nexttobullets, solo (old name verticalcentered), none
navigationStyle:"round", // round,square,navbar,round-old,square-old,navbar-old, or any from the list in the docu (choose between 50+ different item), custom
navigationHAlign:"left", // Vertical Align top,center,bottom
navigationVAlign:"bottom", // Horizontal Align left,center,right
navigationHOffset:30,
navigationVOffset:30,
soloArrowLeftHalign:"left",
soloArrowLeftValign:"center",
soloArrowLeftHOffset:0,
soloArrowLeftVOffset:0,
soloArrowRightHalign:"right",
soloArrowRightValign:"center",
soloArrowRightHOffset:0,
soloArrowRightVOffset:0,
touchenabled:"on", // Enable Swipe Function : on/off
stopAtSlide:-1, // Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0, then it stops already in the first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case.
stopAfterLoops:-1, // Stop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined via stopAtSlide:x, if set to -1 slide never stop automatic
hideCaptionAtLimit:0, // It Defines if a caption should be shown under a Screen Resolution ( Basod on The Width of Browser)
hideAllCaptionAtLilmit:0, // Hide all The Captions if Width of Browser is less then this value
hideSliderAtLimit:0, // Hide the whole slider, and stop also functions if Width of Browser is less than this value
fullWidth:"on",
shadow:0 //0 = no Shadow, 1,2,3 = 3 Different Art of Shadows - (No Shadow in Fullwidth Version !)
});
});
</script>
</body>
</html>
和 index.tpl.php 代码:
<div class="fullwidthbanner-container">
<div class="fullwidthbanner">
<ul>
<!-- THE FIRST SLIDE -->
<li data-transition="fade" data-slotamount="10" data-masterspeed="300" data-thumb="images/thumbs/thumb1.jpg">
<!-- THE MAIN IMAGE IN THE FIRST SLIDE -->
<img src="placeholders/slider/revolution-bg-1.jpg" alt="" >
<!-- THE CAPTIONS IN THIS SLDIE -->
<div class="caption lft rev-entry-2" data-x="25" data-y="30" data-speed="900" data-start="500" data-easing="easeOutBack"><img src="placeholders/slider/rev-entry-2.png" alt="" /></div>
<div class="caption lfb rev-entry-1" data-x="70" data-y="120" data-speed="900" data-start="500" data-easing="easeOutBack"><img src="placeholders/slider/rev-entry-1.png" alt="" /></div>
<div class="caption sft medium_white" data-x="645" data-y="250" data-speed="300" data-start="1200" data-easing="easeOutExpo">test</div>
<div class="caption lfb big_yellow" data-x="645" data-y="285" data-speed="300" data-start="1300" data-easing="easeOutExpo">test</div>
<div class="caption lfb small_yellow" data-x="645" data-y="330" data-speed="200" data-start="1500" data-easing="easeOutExpo">test</div>
<div class="caption lfb small_white" data-x="645" data-y="380" data-speed="300" data-start="1500" data-easing="easeOutExpo">test test test test test test test test</div>
</li>
<!-- THE SECOND SLIDE -->
<li data-transition="boxfade" data-slotamount="15" data-masterspeed="300" data-delay="9400" data-thumb="images/thumbs/thumb2.jpg">
<img src="placeholders/slider/revolution-bg-2.jpg" alt="" >
<div class="caption sfb rev-entry-3" data-x="730" data-y="130" data-speed="900" data-start="1000" data-easing="easeOutBack"><img src="placeholders/slider/rev-entry-3.png" alt="" /></div>
<div class="caption lft rev-entry-4" data-x="540" data-y="20" data-speed="900" data-start="1000" data-easing="easeOutBack"><img src="placeholders/slider/rev-entry-4.png" alt="" /></div>
<div class="caption lfl very_big_white" data-x="0" data-y="216" data-speed="300" data-start="1200" data-easing="easeOutExpo">test</div>
<div class="caption lfl very_big_white" data-x="0" data-y="275" data-speed="300" data-start="1300" data-easing="easeOutExpo">test</div>
<div class="caption lfb big_white" data-x="0" data-y="360" data-speed="300" data-start="1500" data-easing="easeOutExpo"><a href="index.html#">test Now</a></div>
</li>
<!-- THE THIRD SLIDE -->
<li data-transition="turnoff" data-slotamount="15" data-masterspeed="300">
<img src="placeholders/slider/revolution-bg-3.jpg" alt="" >
<div class="caption sfb rev-entry-5" data-x="650" data-y="168" data-speed="700" data-start="500" data-easing="easeOutExpo"><img src="placeholders/slider/rev-entry-5.png" alt="" /></div>
<div data-easing="easeOutExpo" data-start="900" data-speed="600" data-y="140" data-x="540" class="caption lft tp-caption start rev-entry-6" data-easing="easeOutBack"><img src="placeholders/slider/rev-entry-6.png" alt="" /></div>
<div data-easing="easeOutExpo" data-start="1500" data-speed="800" data-y="70" data-x="400" class="caption lft tp-caption start rev-entry-7" data-easing="easeOutBack"><img src="placeholders/slider/rev-entry-7.png" alt="" /></div>
<div data-easing="easeOutExpo" data-start="2000" data-speed="1000" data-y="20" data-x="280" class="caption lft tp-caption start rev-entry-8" data-easing="easeOutBack"><img src="placeholders/slider/rev-entry-8.png" alt="" /></div>
<div class="caption lfl stl bg-op"
data-x="0"
data-y="380"
data-speed="300"
data-start="500"
data-easing="easeOutExpo" ><p class="big_yellow">test</p><span class="medium_white">test</span></div>
</li>
</ul>
<div class="tp-bannertimer"></div>
</div>
</div>
如果有人有解决方案,那就太好了。谢谢。
已编辑 : 工作时的图像 -- http://gyazo.com/cea705bdd1badfc22a3ef6f7699940e8 -- 不工作时的图像 -- http://gyazo.com/e0db6b14e4049b3cc570913e8bef1b4d --
已解决:请检查@pawel回复,这(对我来说)是一个解决方案。
在加载包含滑块内容的 html 之前初始化滑块。试试这个:
var sliderInit = function(){
if (tpj.fn.cssOriginal!=undefined)
tpj.fn.css = tpj.fn.cssOriginal;
tpj('.fullwidthbanner').revolution({ /* params */ });
}
在您的.load()
方法中,使用滑块加载页面时将其添加为回调
jQuery("#main-content").load("/tpl/index.tpl.php", sliderInit );
div
中的内容是在 jquery 加载后添加的尝试使用
jQuery(document).ready(function(){
// load index page when the page loads
jQuery("#main-content").load("/tpl/index.tpl.php");
jQuery(document).on('click',"#index",function(){
// load home page on click
jQuery("#main-content").load("/tpl/index.tpl.php");
});
jQuery(document).on('click',"#about",function(){
// load about page on click
jQuery("#main-content").load("about.html");
});
jQuery(document).on('click',"#contact",function(){
// load contact form onclick
jQuery("#main-content").load("contact.html");
});
});
相关文章:
- 如何在生成下载文件时显示加载动画
- 如何在谷歌字体加载时显示加载图像
- 有没有比在app.js上绑定模块名称更好的方法来动态加载视图模型和视图以显示模态
- 如何用ajax实现加载显示
- 使用javascript加载/显示图像并获得%下载
- 谷歌地图不会加载/显示KML文件
- 我的图片不是使用惰性加载显示的
- javascript d3可视化不加载/显示,直到点击HTML输入
- 导航标签动态加载/显示
- jQuery Select2远程数据加载:显示选项而不是占位符
- Console.log一些东西一旦异步Facebook喜欢按钮加载(显示)
- PHP停止表单重新加载显示错误Js
- 预加载显示/隐藏分区
- ReCaptcha不会在IE中加载/显示,但在Chrome和safari中可以完美运行
- dom事件——通过JavaScript加载显示一个又一个元素
- jQuery延迟加载-显示的问题:无
- Json.数据没有正确加载/显示
- 在每个页面加载显示不同的图像
- 如何检测PDF数据对象是否在html对象中加载/显示/有效
- Jquery添加页面加载显示请求的标签功能