Question

我是网络编程的新手，所以请原谅。

我的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">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
  </div>

来自gallery.html的图像滑块被加载但它不起作用..我无法移动图像..但是如果我将代码移动到index.html而不是使用js加载

Answer 1

从上面的评论我知道gallery.html包含在您的页面中，但滑块无效。如果是这种情况，那么我假设你已经从你的主文件（你从中加载其他文件）调用了滑块脚本。在这种情况下，新加载的元素无法附加到滑块脚本，因为它们稍后会加载。您可以使用http://api.jquery.com/delegate/或http://api.jquery.com/live/

我建议您使用jQuery的原因是，使用更简单的方法完成某些复杂和/或困难任务变得更加简单。

你说，

来自gallery.html的图像滑块被加载但它不起作用..我无法移动图像..但是如果我将代码移动到index.html并且不使用js加载，则同样有效。

发布index.html。

Answer 2

    case "gallery":
            $('#menu1').load('gallery.html');
            //call code for carousel here
            //eg: $( "#myCarousel" ).carousel();
            break;

问题是，当轮播在开始时分配时，这样的div不存在，因此失败。稍后添加div后，它不会分配给轮播。没有probs，这可以在调用案例库后完成。

从单独的html文件加载轮播

2 个答案: