1

私はWebプログラミングが初めてなので、ご容赦ください。

index.html ファイルに div がありますが、これは empty です。

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

メニュー項目のクリックに基づいて、div の横に html ファイルをロードします。

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

したがって、gallery.html には Twitter ブートストラップ サンプル カルーセルがありますが、ロードされません。ただし、コードを index.html の「menu1」div に直接貼り付けると、すべてが機能しているように見えます。

どんな提案も役に立ちます。

EDIT*** my 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 の EDIT** 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 の画像スライダーが読み込まれますが、機能しません。

4

2 に答える 2

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

問題は、最初にカルーセルが割り当てられている場合、そのようなdivが存在しないため、失敗することです。後でdivが追加されると、カルーセルには割り当てられません。問題はありません。これは、ケースギャラリーが呼び出された後に実行できます。

于 2012-11-17T20:55:49.367 に答える
0

上記のコメントから、ページに含まれていることがわかりgallery.htmlますが、スライダーが機能していません。その場合は、スライダー スクリプトをメイン ファイル (そこから他のファイルをロードするファイル) から呼び出したと仮定します。このシナリオでは、新しく読み込まれた要素は後で読み込まれるため、スライダー スクリプトに添付できません。http://api.jquery.com/delegate/またはhttp://api.jquery.com/live/を使用できます

jQuery を使用することをお勧めする理由は、より簡単なアプローチで特定の複雑なタスクや難しいタスクを簡単に実行できるようになるためです。

あなたが言った、

gallery.html の画像スライダーが読み込まれますが、機能しません。

その index.html を投稿します。

于 2012-11-17T20:10:47.307 に答える