メニューリストをクリックすると、同じページのDIVにHTMLページを読み込む方法は？

私はウェブから見たhtml5の例を変換しようとしていますが、新しいページに読み込むのではなく、コンテナセクションの同じページにhrefをロードするのに問題があります。 jqueryスクリプトを追加してhrefのデフォルトの動作を上書きし、divにロードしましたが、動作していないようです。以下は私のHTMLとJSのコードです。メニューリストをクリックすると、同じページのDIVにHTMLページを読み込む方法は？

INDEX.HTML

<!DOCTYPE html> 
    <html > 
     <head> 
     <meta charset="UTF-8"> 
     <title>MY PROJECT</title> 


     <link rel="stylesheet" href="css/normalize.css"> 

     <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> 

      <link rel="stylesheet" href="css/style.css"> 

     </head> 

     <body> 

      <div id="wrapper"> 
      <div class="overlay"></div> 

      <!-- Sidebar --> 
      <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation"> 
       <ul class="nav sidebar-nav"> 
        <li class="sidebar-brand"> 
         <a href="#"> 
          MY PROJECT 
         </a> 
        </li> 
        <li> 
         <a href="#"><i class="fa fa-fw fa-home"></i> Back to Home</a> 
        </li> 
        <li> 
         <a href="1.html"><i class="fa fa-fw fa-cog"></i> HTML 1</a> 
        </li> 
        <li> 
         <a href="2.html"><i class="fa fa-fw fa-cog"></i> HTML 2</a> 
        </li> 
        <li> 
         <a href="3.html"><i class="fa fa-fw fa-cog"></i> HTML 3</a> 
        </li> 
        <li> 
         <a href="4.html"><i class="fa fa-fw fa-cog"></i> HTML 4</a> 
        </li> 
        <li> 
         <a href="5.html"><i class="fa fa-fw fa-cog"></i> HTML 5</a> 
        </li> 
        <li> 
         <a href="6.html"><i class="fa fa-fw fa-cog"></i> HTML 6</a> 
        </li> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-plus"></i> ADVANCE <span class="caret"></span></a> 
         <ul class="dropdown-menu" role="menu"> 
         <li class="dropdown-header">Advance</li> 
         <li><a href="advance.html">chart mod a</a></li> 

         </ul> 
        </li> 

        <li> 
         <a href="#"><i class="fa fa-fw fa-dropbox"></i> SLIDE SHOW MODE</a> 
        </li> 

       </ul> 
      </nav> 
      <!-- /#sidebar-wrapper --> 

      <!-- Page Content --> 
      <div id="page-content-wrapper"> 
       <button type="button" class="hamburger is-closed animated fadeInLeft" data-toggle="offcanvas"> 
       <span class="hamb-top"></span> 
       <span class="hamb-middle"></span> 
       <span class="hamb-bottom"></span> 
       </button> 
       <div class="container"> 
        <div class="row"> 
         <div class="col-lg-8 col-lg-offset-2"> 
          <h1 class="page-header">Reports Control</h1> 
          <p class="lead">(BETA) </p> 
          <p>Use nav side bar to select report ...</p> 

         </div> 
        </div> 
       </div> 
      </div> 
      <!-- /#page-content-wrapper --> 

     </div> 
     <!-- /#wrapper --> 
     <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 
    <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script> 

<script src="js/index.js"></script> 

</body> 
</html>

INDEX.JS

$(document).ready(function() { 
    var trigger = $('.hamburger'), 
     overlay = $('.overlay'), 
    isClosed = false; 

    trigger.click(function() { 
     hamburger_cross();  
    }); 

    function hamburger_cross() { 

     if (isClosed == true) {   
     overlay.hide(); 
     trigger.removeClass('is-open'); 
     trigger.addClass('is-closed'); 
     isClosed = false; 
     } else { 
     overlay.show(); 
     trigger.removeClass('is-closed'); 
     trigger.addClass('is-open'); 
     isClosed = true; 
     } 
    } 

    $('[data-toggle="offcanvas"]').click(function() { 
     $('#wrapper').toggleClass('toggled'); 
    }); 

    $('#wrapper').on('click', function (e) { 
      e.preventDefault(); 
      var page = $(this).attr('href'); 
      $('#page-content-wrapper').load(page); 
    }); 

});

出典

2017-02-01 TwoThumbSticks

何が問題なのですか？ – guest271314

$('#wrapper')アンカーDIVないが、何のhref属性が存在しないがあることを意味します。代わりに使用してみてください：

// $('#wrapper .nav a') - will look for <a> tag inside of wrapper div at the .nav element 
$('#wrapper .nav a').on('click', function (e) { 
    e.preventDefault(); 
    var page = $(this).attr('href'); 
    $('#page-content-wrapper').load(page); 
});

出典

2017-02-01 02:56:58

私はあなたの提案を試みましたが、今はメニューをクリックすると何もしません。また、IDをコンテナdivに追加しようとしましたが、$（ '＃containerid'）を試しました。それでも動作しません。 – TwoThumbSticks

クリックハンドラがトリガされますか？クリックハンドルの中に警告を入れて何が起こるかを見てみよう –

私はもっと注意深くそれをデバッグしたので、あなたのコードは実際に動作していたことに気付きました。元のdivは、呼び出されるhtmlの背景をオーバーライド/オーバーラップしていますが、それはすべて一緒に新しい問題です。ありがとう！ '＃wrapper .nav a'のようなdivの中にネストされた要素を呼び出すことについて議論しているドキュメントやチュートリアルがどこにあるのでしょうか？ – TwoThumbSticks

問題は、イベントリスナーが何href属性を持っていない#wrapper要素にバインドされていることです。イベントハンドラ関数の内部では、$(this)はハンドラがバインドされた要素を参照するため、個々の<a>要素のクリックをリッスンする必要があります。

$('.nav a').on('click', function (e) { 
      e.preventDefault(); 
      var page = $(this).attr('href'); 
      $('#page-content-wrapper').load(page); 
    });

出典

2017-02-01 02:57:43 ppajer

あなたの提案を試みましたが、今はメニューをクリックすると何もしません。私はまた、コンテナdivにIDを追加しようとしましたが、$（ '＃containerid'）を試しました。それでも動作しません。 – TwoThumbSticks

メニューリストをクリックすると、同じページのDIVにHTMLページを読み込む方法は？

答えて

関連する問題