换页时保持div不变不刷新

Question

我正在寻找一种在我的网站上设置导航栏的方法，当我从 home.php 更改为 page1.php。目前，我的导航栏包含在 nav.php 的主页和 page1 中，使用脚本中的 JS 淡入淡出。

Answer 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>

希望对您有所帮助，编码愉快:)

换页时保持div不变不刷新

Keeping div the same without refresh when changing pages

html

javascript

php

navigation

refresh