如何更改内部链接的 url 外观？答案

【问题标题】：How to change url appearance of internal links?如何更改内部链接的 url 外观？
【发布时间】：2017-04-28 07:24:09
【问题描述】：

目前我正在开发一个示例项目，该项目是一个单页网站，所有详细信息都分为几个部分。我通过内部链接调用所有部分，我想将这些链接的 url 结构从“example.com/#section-1”修改为“example.com/about-us”。那么，我该如何实现呢？以下是示例代码结构。

<!DOCTYPE html>
<html>
  <head>
    <style>
      html, body, body *{
        margin:0;
        padding:0;
      }
      body, html, div{
        height:100%;
        width:100%;
      }
      #container-1{
        background-color:green;
      }
      #container-2{
        background-color:yellow;
      }
      #container-3{
        background-color:gray;
      }
      .container p{
        padding:10px;
        font-size:50px;
      }
    </style>
  </head>
  <body>
    <div id="main-container">
      <div id="container-1" class="container"><p>Container-1</p><a href="#container-2">To Container-2</a></div>
      <div id="container-2" class="container"><p>Container-2</p><a href="#container-3">To Container-3</a></div>
      <div id="container-3" class="container"><p>Container-3</p><a href="#container-1">To Container-1</a></div>
    </div>
  </body>
</html>

【问题讨论】：

使用about-us 或contact-us 而不是container-1 或container-2。
我可以使用它们，但是我在 url 中得到了我不想要的 '#' 符号。

标签： javascript php html css apache

【解决方案1】：

如果我理解正确，您可以使用history.pushState。

所以步骤如下：

从点击的链接中获取相对 URL。
使用pushState 将状态推送到历史记录（这样您就可以使用后退和前进。
将页面滚动到所选元素。

请记住，您需要配置您的服务器，以便将任何子页面传输（重写）到主页。因此，当用户尝试转到“子页面”（例如container2）时，服务器将返回主页面，并使用 javascript 滚动到页面的右侧部分。

Array.prototype.forEach.call(document.querySelectorAll('a'), function(a) {
  a.addEventListener('click', function(e) {
    e.preventDefault();

    var link = a.hash.replace('#', '');
    history.pushState(null, 'page', link);
    scrollToElement();
  });
});

function scrollToElement() {
  var page = location.pathname.replace('/', ''),
      container = document.querySelector('#' + page);

  container.scrollIntoView();
}

<!DOCTYPE html>
<html>
  <head>
    <style>
      html, body, body *{
        margin:0;
        padding:0;
      }
      body, html, div{
        height:100%;
        width:100%;
      }
      #container-1{
        background-color:green;
      }
      #container-2{
        background-color:yellow;
      }
      #container-3{
        background-color:gray;
      }
      .container p{
        padding:10px;
        font-size:50px;
      }
    </style>
  </head>
  <body>
    <div id="main-container">
      <div id="container-1" class="container"><p>Container-1</p><a href="#container-2">To Container-2</a></div>
      <div id="container-2" class="container"><p>Container-2</p><a href="#container-3">To Container-3</a></div>
      <div id="container-3" class="container"><p>Container-3</p><a href="#container-1">To Container-1</a></div>
    </div>
  </body>
</html>

http://output.jsbin.com/zaduqo

【讨论】：

它工作正常。但是在我的本地机器上它不起作用，它给了我这个错误“未捕获的 DOMException：无法在 'History' 上执行 'pushState'：具有 URL 'file:///D:/x/container-2 的历史状态对象' 不能在源为 'null' 和 URL 的文档中创建。我不知道为什么？如果您不介意它是如何工作的，请您解释一下，因为我是 JavaScript 的新手。
我认为您需要从本地服务器而不是文件系统 (tutorial how to create local server here) 运行它。
好的。我会尽力。感谢您的帮助。
它对我的朋友有用，但是，当我在实时服务器上使用它时，例如我正在输入 example.com/container-1，然后我收到来自主机的文件未找到错误。
阅读Keep it in you mind 注释。 How to configure Apache to deal with pushState

【解决方案2】：

我会推荐使用 Apache mod_rewrite 模块

RewriteRule ^/about-us /index.php#container-2 [NE,L,R=301]
RewriteRule ^/contact-us /index.php#container-1 [NE,L,R=301]

然后使用

<a href="about-us">links</a>

【讨论】：

对不起，我的朋友，它没用。主机说文件不存在。