文章/答案/技术大牛

发布

社区首页 >问答首页 >如何改变内部链接的url外观？

问如何改变内部链接的url外观？
EN

Stack Overflow用户

提问于 2016-12-13 09:32:30

回答 2查看 136关注 0票数 3

目前，我正在工作的一个样本项目，这是一个单一的网页网站，所有的细节都被分成几个部分。我通过内部链接调用所有部分，并希望将这些链接的url结构从“example.com/#sect-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>

css

apache

javascript

php

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-12-13 09:51:00

如果我对你的理解正确，你可以使用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

票数 3

Stack Overflow用户

发布于 2016-12-13 10:06:02

我将重新使用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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41117616

复制

相似问题

问如何改变内部链接的url外观？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何改变内部链接的url外观？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何改变内部链接的url外观？
EN