Question

目前我正在开展一个示例项目，该项目是一个单页网站，其中所有细节都分为几个部分。我通过内部链接调用所有部分，我想修改这些链接的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>

Answer 1

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

以下是步骤：

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

请记住，您需要配置服务器，将任何子页面转移（重写）到主页面。因此，当用户尝试转到＆＃34;子页面＆＃34; （例如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

Answer 2

我建议使用Apache mod_rewrite 模块

UserLoginTask() {
        username = mEmailView.getText().toString().trim();
        password = mPasswordView.getText().toString().trim();
        StringRequest stringRequest = new StringRequest(Request.Method.POST, Constants.BASE_URL.concat(Constants.CONSULTANT_KEY_WORD),
                new Response.Listener<String>() {
                    @Override
                    public void onResponse(String response) {
                        if(response.trim().equals("success")){
                            attemptLogin();
                        }else{
                            Toast.makeText(LoginActivity.this,response,Toast.LENGTH_LONG).show();
                        } }
                },
                new Response.ErrorListener() {

                    @Override
                    public void onErrorResponse(VolleyError error) {
                        Toast.makeText(LoginActivity.this,error.toString(),Toast.LENGTH_LONG ).show();
                    }
                }){
            @Override
            protected Map<String, String> getParams() throws AuthFailureError {
                Map<String,String> map = new HashMap<String,String>();
                map.put(KEY_USERNAME,username);
                map.put(KEY_PASSWORD,password);
                return map;
            }
        };
        RequestQueue requestQueue = Volley.newRequestQueue(getApplicationContext());
        requestQueue.add(stringRequest);

然后使用

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

如何更改内部链接的网址外观？

2 个答案: