如何在 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>

为了解决这个问题，您可以 load/change 您的内容点击导航。在您的 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>

如何在 html 导航栏点击之间实现平滑过渡

how to get smooth transition between html navigation bar clicks

html

javascript

navigation

twitter-bootstrap-3

bootstrap-4