0

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

www.example/index.html# page1

或者

www.example/index.html# page2

或者

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>

谢谢您的帮助。

4

3 回答 3

2

对于 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();
        }
    });
});
于 2013-08-23T10:27:08.193 回答
1 
<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>
于 2013-08-23T10:35:58.580 回答
0

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

于 2013-08-23T10:38:47.727 回答