Question

我正在寻找带有自定义网址的内部网页导航。请参考我的代码。

当前代码：

<ul class="mdl-menu">
        <li class="mdl-menu__item"><a href="#" class="navText nav_link">Home</a></li>
        <li class="mdl-menu__item"><a href="#About" class="navText nav_link">About</a></li>
        <li class="mdl-menu__item"><a href="#LightUp" class="navText nav_link">Light Up</a></li>
        <li class="mdl-menu__item"><a href="#Events" class="navText nav_link">Events</a></li>
        <li class="mdl-menu__item"><a href="#SignUp" class="navText nav_link">Sign up</a></li>
        <li class="mdl-menu__item"><a href="#NCFMix" class="navText nav_link">NCF Mix</a></li>
        <li class="mdl-menu__item"><a href="#LightUpNCF" class="navText nav_link">#LightUpNCF</a></li>
      </ul>

当前OutPut：主要网址：“www.example.com/php/home.php”

当我点击第二个菜单按钮时，意味着“关于”。它使用以下URL导航到目标块。 “www.example.com/php/home.php#About”

我期待的是 “www.example.com/About”或“www.example.com/#About”

我也试过window.history.pushState('', '','/About'); 这会根据需要更改URL，但是当我刷新同一页面时，它会显示404错误。请帮我解决一下这个。有没有办法使用JavaScript或PhP来实现它。

先谢谢。

Answer 1

如果这是一个主目录，那么创建一个.htaccess文件并写下

Options -Indexes
DirectoryIndex home.php       
order deny,allow

您还可以添加以下规则

RewriteRule ^ home.php [QSA,L]

Answer 2

这将帮助您检查：

Hashbangs（＃！），哈希（＃）甚至HTML5 History API（pushState，popState）都有问题。本文将详细介绍每个问题及其用例，然后提供解决方案的演变。最后，通过简单的教育，您将能够取得更好的成果;在为用户提供更好的体验方面，以及在解决方案中提供更好的兼容性，可访问性和可维护性。

Reference Link

使用自定义网址进行内部网页导航

2 个答案: