单击菜单列表时如何在同一页面的DIV中加载HTML页面？

Question

I am trying to convert an html5 example I saw from the web but I am having trouble making the href to load on the same page in the container section, instead of loading into a new page. 我正在尝试转换从网上看到的html5示例，但是我无法使href加载到容器部分的同一页面上，而不是加载到新页面中。 I added a jquery script to override the default behaviour of the href and load it to the div but still doesn't seem to work. 我添加了一个jQuery脚本来覆盖href的默认行为并将其加载到div中，但似乎仍然无法正常工作。 Below is my HTML and JS codes. 以下是我的HTML和JS代码。

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

});

Answer 1

$('#wrapper') is a DIV not the anchor, means that there is no href attributes exist. $('#wrapper')是DIV而不是锚，这意味着不存在href属性。 Instead try used : 而是尝试使用：

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

Answer 2

The problem is that your event listener is bound to the #wrapper element which has no href attribute. 问题是您的事件侦听器绑定到没有href属性的#wrapper元素。 Inside the event handler function, $(this) refers to the element the handler was bound to, so you need to listen to clicks on the individual <a> elements. 在事件处理函数中， $(this)指向处理程序绑定到的元素，因此您需要侦听单个<a>元素的单击。

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

单击菜单列表时如何在同一页面的DIV中加载HTML页面？

问题描述

2 个解决方案

解决方案1
2 已采纳 2017-02-01 02:56:58

解决方案2
2 2017-02-01 02:57:43

单击菜单列表时如何在同一页面的DIV中加载HTML页面？

问题描述

2 个解决方案

解决方案1 2 已采纳 2017-02-01 02:56:58

解决方案2 2 2017-02-01 02:57:43

解决方案1
2 已采纳 2017-02-01 02:56:58

解决方案2
2 2017-02-01 02:57:43