Question

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

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相同而不刷新

1 个答案: