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

Question

我有两页主页和服务。在第一页(主页(中，使用id从导航栏平滑滚动到"关于"、"联系"、"为什么"。从第二个页面(服务(，如果使用id点击第一页(主页(的ABOUT或CONTACT，它会显示确切的位置，但会得到类似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显示在URL中。

因此，请建议如何使用Javascript/Jquery/Html/Css等删除它

Answer 1

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

https://www.example.com/(index.php如果是索引页，你就不能写index.php(#关于

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

Answer 2

在大多数服务器上，您可以用/(root(替换到index.html的链接，它将正常工作。

<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();

注意：不要同时使用以上两个选项！否则，它将变成一个无限递归。