1

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

我的 index.html 文件中有一个 div，它是空的。

<div id='menu1'  >
</div><!--/.well -->

基于菜单项点击，我在 div 中加载 html 文件。

$('#menu1').load('gallery.html')

因此，gallery.html 有 twitter 引导示例轮播，但它没有被加载，但是如果我将代码直接粘贴到 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加载，同样的工作原理

4

2 回答 2

0

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

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

你说，

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

发布那个 index.html。

于 2012-11-17T20:10:47.307 回答
0 
    case "gallery":
            $('#menu1').load('gallery.html');
            //call code for carousel here
            //eg: $( "#myCarousel" ).carousel();
            break;

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

于 2012-11-17T20:55:49.367 回答