Wie lade ich die HTML-Seite in DIV derselben Seite, wenn ich auf die Menüliste klicke?

Ich versuche ein html5-Beispiel zu konvertieren, das ich aus dem Internet gesehen habe, aber ich habe Probleme damit, die href auf der gleichen Seite im Container-Bereich zu laden, anstatt auf eine neue Seite zu laden. Ich habe ein jquery-Skript hinzugefügt, um das Standardverhalten von href zu überschreiben und es in das div zu laden, aber es scheint immer noch nicht zu funktionieren. Unten finden Sie meine HTML- und JS-Codes.Wie lade ich die HTML-Seite in DIV derselben Seite, wenn ich auf die Menüliste klicke?

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); 
    }); 

});

Quelle

2017-02-01 TwoThumbSticks

Nicht sicher, welches Problem ist? – guest271314

$('#wrapper') ist ein DIV nicht das Ankermittel, daß es keine href Attribute vorhanden ist. Stattdessen versuchen verwendet:

// $('#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); 
});

Quelle

2017-02-01 02:56:58

Ich habe deinen Vorschlag versucht, aber jetzt, wenn ich auf das Menü klicke, tut es nichts. Ich habe auch versucht, eine ID zum Container div hinzuzufügen und versucht $ ('# containerid'). Load (page); aber es funktioniert immer noch nicht. – TwoThumbSticks

wird der Click-Handler ausgelöst? Versuchen Sie, Alarm innerhalb des Klick-Handle zu setzen und sehen Sie, was passiert –

Jetzt, da ich es sorgfältiger debuggte, bemerkte ich, dass Ihr Code tatsächlich funktionierte und es nur mein CSS war, das irgendwie die Ansicht des aufgerufenen HTML-Hintergrunds verdunkelte. Das ursprüngliche div überschreibt/überlappt den Hintergrund des aufgerufenen html, aber das ist ein neues Problem alle zusammen. Vielen Dank! Stört es dich, wo ich weitere Dokumentationen oder Tutorials finden kann, die aufrufende Elemente diskutieren, die in einem div wie dem "#wrapper .nav a" -Ansatz verschachtelt sind? – TwoThumbSticks

Das Problem ist, dass Ihr Ereignis-Listener an das #wrapper Element gebunden ist, das hat kein href Attribut. Innerhalb der Event-Handler-Funktion bezieht sich $(this) auf das Element, an das der Handler gebunden war. Daher müssen Sie auf die einzelnen Elemente <a> klicken.

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

Quelle

2017-02-01 02:57:43 ppajer

Ich habe Ihren Vorschlag versucht, aber jetzt, wenn ich auf das Menü klicken, tut es nichts. Ich habe auch versucht, eine ID zu dem Container div hinzuzufügen und versuchte $ ('# containerid'). Load (page); aber es funktioniert immer noch nicht. – TwoThumbSticks

Wie lade ich die HTML-Seite in DIV derselben Seite, wenn ich auf die Menüliste klicke?

Antwort

Verwandte Themen