Question

我正在尝试转换我在网上看到的html5示例，但是我无法将href加载到容器部分的同一页面上，而不是加载到新页面中。我添加了一个jquery脚本来覆盖href的默认行为并将其加载到div但仍然似乎无法工作。下面是我的HTML和JS代码。

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

});

Answer 1

request.setCharacterEncoding("UTF-8");是DIV而不是锚点，意味着不存在href属性。相反尝试使用：

$('#wrapper')

Answer 2

问题是您的事件侦听器绑定到没有#wrapper属性的href元素。在事件处理函数内部，$(this)引用处理程序绑定的元素，因此您需要聆听单个<a>元素的点击。

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

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

2 个答案: