Question

我正在开发带有侧边栏的laravel应用程序，并且当用户单击链接时不重新加载整个页面，我已经使用了此脚本。

<script>
    $('document').ready(function(){

      $('.nav-link').click(function (event) {
        // Avoid the link click from loading a new page
        event.preventDefault();

        // Load the content from the link's href attribute
        $('.container-fluid').load($(this).attr('href'));
    })

    });

 </script>

这是 HTML

  <a class="nav-link" href="/test">
 <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <div class="content">
      <div class="container-fluid">



      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

这是 /测试包含的页面内容

  this is for testing purposes only

该行被重复多次。
我到处寻找了许多变通办法，并研究了laravel渲染，但是我无法做到这一点。

Answer 1

您使用了错误的选择器，因为container-fluid在您的布局中存在多次。

请改用此方法，或在您的主要内容div中添加id属性：

    $('.content .container-fluid').load($(this).attr('href'));

或

<!-- Main content -->
<div class="content">
  <div id="my-content" class="container-fluid">
  </div><!-- /.container-fluid -->
</div>
<!-- /.content -->

使用：

    $('#my-content').load($(this).attr('href'));

Answer 2

存在两个container-fluid类是问题所在。

使用Ajax仅重新加载页面的一部分时，指定的页面内容会重复

2 个答案: