更改页面时保持div相同而不刷新[关闭]答案

【问题标题】：Keeping div the same without refresh when changing pages [closed]更改页面时保持div相同而不刷新[关闭]
【发布时间】：2017-07-24 06:38:37
【问题描述】：

我正在寻找一种在我的网站上设置导航栏的方法，当我从 home.php 更改为 page1.php时不会刷新/重新加载/闪烁>。目前，我的导航栏使用 JS 淡入脚本包含在 nav.php 的主页和 page1 中。

【问题讨论】：

使用 AngularJS 进行查看

标签： javascript php html navigation refresh

【解决方案1】：

您可以使用 Ajax 来做到这一点。假设你有这种布局结构

<header>
<!-- Your navigation can be here -->
    <ul class="your-navigation">
        <li class="your-navigation__item"><a uri="link-to-home-page-content">Home</a></li>
        <li class="your-navigation__item"><a uri="link-to-page1-content">Page1</a></li>
    </ul>
</header>

<main>
<!-- Your content here -->
</main>

那么你的 Javascript 可能看起来像这样

<script type="text/javascript" src="link-to-jquery"></script>
<script type="text/javascript">
  $(function(){
      function changeContent($uri){
          var $parent = $('main');
          $.ajax({
              url:$uri,
              type:'get',
              success:function($content){
                  $parent.html($content);
              },
              error:function(err){
                  # You can handle errors like 404, etc from here
              }
          });
      }

      $('.your-navigation__item').click(function(){
           changeContent($(this).attr('uri'))
      })
  });
<script>

我希望这是有帮助的，编码愉快:)

【讨论】：