Question

我有一个侧边菜单，其中每个内容的链接都基于隐藏和显示div过程。但是当我使用后退按钮时，未显示下一个div的内容。我怎样才能实现这一目标？我已经阅读了jquery pushstate，但我仍然感到困惑。请帮忙。

到目前为止我对代码的洞察力：

< script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" > < /script>
$(function() {
    var curPage="";
    $("#toggle a").click(function() {
        if (curPage.length) { 
            $("#"+curPage).hide();
        }
        curPage=$(this).data("page");
        $("#"+curPage).show();
    });
});

.content {

  display: none;

}

<div id="container">

  <div id="canvas">

    <div id="nav">
      <ul id="toggle">

        <li><a href="/home" data-page="page1">HOME</a>
        </li>

        <li><a href="#us" data-page="page2">ABOUT US</a>
        </li>

        <li><a href="#end" data-page="page3">PORTFOLIO</a>
        </li>

        <li><a href="#">CONTACT</a>
        </li>
      </ul>

    </div>
    <a href="#" class="toggle-nav" id="bars"><i class="fa fa-bars"></i></a>


    <div id="main">
      <div id="page1" class="content">TEST ONE</div>

      <div id="page2" class="content">TEST TWO</div>

      <div id="page3" class="content">TEST THREE</div>

    </div>

  </div>

Answer 1

这样做的一种方法是设置位置的哈希值并添加setInterval()以跟踪该哈希值的变化。

您需要稍微更改链接：

<li><a href="#page2">ABOUT US</a></li>

单击该链接除了设置URL的哈希值外什么都不做。

这里是javascript（不再需要你的了）：

$(function() {
    window.setInterval(function() {
        if(document.location.hash !== '') {
            $('.content').hide();
            $(document.location.hash).show();
        }
    }, 50);
});

每50毫秒，将检查哈希值，如果它不为空，则该值将用于显示相应的元素。

Everything brought together in a fiddle

Answer 2

如果您可以使用href作为页面ID，那么代码将变得更加容易。您可以避免所有额外的代码。

因此菜单看起来像

<li>
    <a href="#about-us">ABOUT US</a>
</li>

无需使用data-page="page2"
应使用菜单的href id修改页面div。像

<div id="about-us" class="content">TEST ONE</div>

这简单的jquery函数变为

$(function() {
    $(window).on('hashchange', function(e){
        $("#main .content").hide();
        $(window.location.hash).show();
    });
   if(window.location.hash != ""){
      $(window).trigger('hashchange');
    }
});

希望这应该有所帮助...... :)

$(function() {    
    $(window).on('hashchange', function(e){
        $("#main .content").hide();
        $(window.location.hash).show();
    });
    if(window.location.hash != ""){
        $(window).trigger('hashchange');
    }
});

.content {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">

  <div id="canvas">

    <div id="nav">
      <ul id="toggle">

        <li><a href="/home" data-page="page1">HOME</a>
        </li>

        <li><a href="#about-us">ABOUT US</a>
        </li>

        <li><a href="#portfolio" data-page="page3">PORTFOLIO</a>
        </li>

        <li><a href="#contact">CONTACT</a>
        </li>
      </ul>

    </div>
    <a href="#" class="toggle-nav" id="bars"><i class="fa fa-bars"></i></a>


    <div id="main">
      <div id="about-us" class="content">About us ................</div>

      <div id="portfolio" class="content">Portfolio.............</div>

      <div id="contact" class="content">Contact ...........</div>

    </div>

  </div>

从url访问div内容

2 个答案: