我是网络编程的新手,所以请原谅。
我的index.html文件中有一个div,它是空的。
<div id='menu1' >
</div><!--/.well -->
基于菜单项单击,我在div旁加载html文件。
$('#menu1').load('gallery.html')
所以gallery.html有twitter bootstrap示例轮播,但它没有加载,但是如果我将代码直接粘贴到index.html的“menu1”div,那么一切似乎都有效。
任何建议都会有所帮助。
编辑***我的js [调用加载滑块]
$(document).ready(function() {
//$('#menu1').load('home.html')
$("li").click(function(){
// If this isn't already active
if (!$(this).hasClass("active")) {
// Remove the class from anything that is active
$("li.active").removeClass("active");
// And make this active
$(this).addClass("active");
}
});
$('ul li a').live('click', function() {
var clickid = $(this).parent('li').index();
var myid = $(this).attr('id');
$('#menu1').html(" ");
$('#slider').css('display','none');
switch (myid)
{
case "home":
$('#slider').css('display','block');
break;
case "aboutus":
$('#menu1').load('aboutus.html')
break;
case "gallery":
$('#menu1').load('gallery.html')
break;
};
//alert(myid);
//alert(clickid);
});
});
编辑** gallery.html的html代码[我正在谈论的滑块]
<div id = "myCarousel" class="carousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<img src="../photos/1.jpg" alt="">
<div class="carousel-caption">
<h4>Super sweet bathroom</h4>
<p>This bathroom is truly incredible</p>
</div>
</div>
<div class="item">
<img src="../photos/2.jpg" alt="">
<div class="carousel-caption">
<h4>OK, maybe this bathroom is better</h4>
<p>This beautiful bathroom could be yours - just call Price Builders today.</p>
</div>
</div>
<div class="item">
<img src="../photos/3.jpg" alt="">
<div class="carousel-caption">
<h4>Not even sure what this is</h4>
<p>Go figure</p>
</div>
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
来自gallery.html的图像滑块被加载但它不起作用..我无法移动图像..但是如果我将代码移动到index.html而不是使用js加载
答案 0 :(得分:0)
从上面的评论我知道gallery.html
包含在您的页面中,但滑块无效。如果是这种情况,那么我假设你已经从你的主文件(你从中加载其他文件)调用了滑块脚本。在这种情况下,新加载的元素无法附加到滑块脚本,因为它们稍后会加载。您可以使用http://api.jquery.com/delegate/或http://api.jquery.com/live/
我建议您使用jQuery的原因是,使用更简单的方法完成某些复杂和/或困难任务变得更加简单。
你说,来自gallery.html的图像滑块被加载但它不起作用..我无法移动图像..但是如果我将代码移动到index.html并且不使用js加载,则同样有效。
发布index.html。
答案 1 :(得分:0)
case "gallery":
$('#menu1').load('gallery.html');
//call code for carousel here
//eg: $( "#myCarousel" ).carousel();
break;
问题是,当轮播在开始时分配时,这样的div不存在,因此失败。稍后添加div后,它不会分配给轮播。没有probs,这可以在调用案例库后完成。