如何在 html 导航栏点击之间获得平滑过渡

Question

我在以下页面中有一个导航栏

https://stackblitz.com/edit/web-platform-bcjvzq?file=index.html

单击主页或关于按钮会导致整个页面重新加载，首先出现在左上角的字符串，然后导航页面在一秒钟后加载。 过渡并不顺利。 这是什么原因造成的

Answer 1

您遇到的问题是，在导航页面时，会加载整个 HTML、CSS 和 JavaScript。 然后浏览器可以解释你的HTML里面的JavaScript，它负责加载你的导航：

  <script>
    $(function   () {
            $("#nav-placeholder").load("navigation.html");
        });
  </script>

为了解决这个问题，您可以在点击导航时加载/更改您的内容。 在您的 index.html 中，您可以指定设置内容的方法。

<div id="content"></div>  
  <script>
    $("#content").load("index2.html"); //loading the initial content
    function setBody(url){
      $("#content").load(url);
    }
  </script>

然后在导航调用中让你的列表项调用这个函数：

  <li><a id="len1" class="hoverable" onclick="setBody('index2.html')">Home</a></li>
  <li><a id="len2" class="hoverable" onclick="setBody('body2.html')">About</a></li>