Question

这可能是一个愚蠢的问题，但假设我有一个单页网站，其中所有部分都被隐藏并仅在单击按钮菜单以显示该特定部分并隐藏其他部分时显示。现在，当我重新加载页面时，它总是打开默认的第一页。我想要使用的是

www.example / index.html＃第1页

或

www.example / index.html＃第2页

或

www.example / index.html中＃的 PAGE3

index.html页面：

菜单：

<ul>
<li>page1</li>
<li>page2</li>
<li>page3</li>
</ul

部分：

<div id="page1">content</div>
<div id="page2" style="display:none">content</div>
<div id="page3" style="display:none">content</div>

感谢您的帮助。

Answer 1

对于SEO标准，这是完全不可行的，但如果你决定去，你可以使用jQuery。

<强> HTML

<ul id="myMenu">
    <li><a href="#page1">page1</a></li>
    <li><a href="#page2">page2</a></li>
    <li><a href="#page3">page3</a></li>
</ul>

<div id="page1" class="pages">content 1</div>
<div id="page2" class="pages" style="display:none">content 2</div>
<div id="page3" class="pages" style="display:none">content 3</div>

jQuery（Javascript）

$(function () {     
    $(window).on("hashchange", function () {
        var hash = window.location.hash;
        if (hash != "") {
            $(".pages").hide();
            $(hash).show();
        }
    });
});

Answer 2

<html>
  <head>
  </head>
  <body>
    <ul>
      <li><a href="#page1">page1</a></li>
      <li><a href="#page2">page2</a></li>
      <li><a href="#page3">page3</a></li>
    </ul>
    <div id="page1">page1</div>
    <div id="page2">page2</div>
    <div id="page3">page3</div>
    <script>
      var pageIds = ['page1','page2','page3'];
      function hidePage(){
        for(var i=0;i<pageIds.length;i++){
          document.getElementById(pageIds[i]).style.display = 'none';
        }
      }
      function getPage(){
        var hash = window.location.hash.slice(1);
        return document.getElementById(hash);
      }
      function showPage(){
        var currentPage = getPage();
        if(currentPage){
          currentPage.style.cssText = 'display:block';
          }else{
          document.getElementById('page1').style.cssText = 'display:block';
        }
      }
      function initPage(){
        hidePage();
        showPage();
      }
      initPage();
      setInterval(function(){
        initPage();
      },300);
    </script>
  </body>
</html>

Answer 3

jQuery具有缓存库，您可以使用该库来保留上次打开的选项卡或链接。

一页网站，开放部分改变哈希AJAX

3 个答案: