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

Posted 2023-03-05

【中文标题】如何在 html 导航栏点击之间获得平滑过渡

【英文标题】：how to get smooth transition between html navigation bar clicks

【发布时间】：2021-08-02 01:08:13

【问题描述】：

我在下一页有一个导航栏

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

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

【参考方案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>

【讨论】：

最后一项完全破坏了链接，现在导航根本不起作用

我想我现在已经修好了，看起来很棒，谢谢