隐藏索引页面的 URL 路径名和哈希

Question

我有 2 页主页和服务。在第一页（主页）中，使用 id 从导航栏平滑滚动到关于、联系、为什么。从第二页（服务）开始，如果使用 ID 单击第一页（主页）的“关于”或“联系方式”，它会显示确切的位置，但会获取像 https://www.example.com/index#about、https://www.example.com/index#contact 这样的 URL

第一页（首页）的代码如下。

    <nav>
         <ul class="nav navbar-nav navbar-right">
          <li class="active"><a class="smooth_scroll" href="#slider">HOME</a></li>
          <li><a class="smooth_scroll" href="#about">ABOUT</a></li>
          <li><a href="service.html">SERVICES</a></li>
          <li><a class="smooth_scroll" href="#whyus">WHY US</a></li>
          <li><a class="smooth_scroll" href="#contact">CONTACT</a></li>
        </ul>
    </nav>

第二页（服务）的代码如下。

<div class="navbar-collapse collapse">
  <nav>
     <ul class="nav navbar-nav navbar-right">
       <li><a href="index.html">HOME</a></li>
       <li><a href="index.html#about">ABOUT</a></li>
       <li class="active"><a href="/service.html">SERVICES</a></li>
       <li><a href="index.html#pricing">WHY US</a></li>
       <li><a href="index.html#contact">CONTACT</a></li>
     </ul>
  </nav>
</div>

从第二页（服务）导航到第一页（主页）时，如何获取https://www.example.com 而不是https://www.example.com/index#about 或https://www.example.com/index#contact 之类的URL，我不希望显示index#id在网址中。

所以，请建议如何使用 Javascript/Jquery/Html/Css 等删除它。

Answer 1

尝试完整链接并在 index.php 上重命名 index.html

https://www.example.com/(index.php如果是索引页，可以不写index.php)#about

href="https://www.example.com/#about"

Answer 2

您可以在大多数服务器上将指向index.html 的链接替换为/（root），这样就可以正常工作了。

<li><a href="/">HOME</a></li>

要移除#hash，您可以使用事件监听器来检测它的变化。

function removeHash() {
  // Option 1: This will only remove the part after "#", i.e. hash value
  window.location.hash = "";

  // Option 2: This will split the URL by "#" and use the part before it
  history.pushState(null, null, window.location.href.split("#")[0]);
}

// Remove hash whenever hash is changed
window.addEventListener('hashchange', removeHash, false);

// Run it once when page loads
removeHash();

注意：请勿同时使用以上两个选项！否则会变成无限递归。