Question

点击链接时我会更新内容。

脚本

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src = "history.js/scripts/bundled/html4+html5/jquery.history.js"> </script>
//download: https://codeload.github.com/browserstate/history.js/legacy.zip/master
<script type="text/javascript" language="javascript">
    $(function(){

        $('.sidebar a').click(function(e) {
            e.preventDefault();
            var linkLocation = $(this).attr('href');            
            History.pushState(null, document.title, linkLocation);

        return false;
        });

        function loadPage(url) {            
            $('.content').load(url);
        }


        $(document).ready(function (e) {
            var History = window.History;
            History.Adapter.bind(window, 'statechange',function(e){
                e.preventDefault();

                var State = History.getState();

                loadPage(State.url);

            });
        });
    });


</script>

HTML 的

...
<body>

<div class="container">
  <div class="sidebar">
    <ul class="nav">
      <li><a href="page1.html" > № 1</a></li>
      <li><a href="page2.html" > № 2</a></li>
      <li><a href="page3.html" > № 3</a></li>
      <li><a href="page4.html" > № 4</a></li>
      <li><a href="page5.html" > № 5</a></li>
      <li><a href="page6.html" > № 6</a></li>
    </ul>
...
</div> 
<div class="content"></div>
</div></body>

Page1.html

    ...
    <body>
    <h1>№ 1</h1>
    <p>lalalal</p>
    <br>
    <form action =select.php method=get>    
            <div align=center>bla-bla-bla<input type=text name=param1> <br><br>
                <table border=0 width=80%>
                    <tbody>
                        <tr>
                            <td align=center> <input type=reset   value="Clear" > </td>
                            <td align=center>  <input type=submit name=send value="Send">   </td> 
                            <td align=center> <input type="button" onClick="history.back();" value="Back"/> </td>
                        </tr>  
                    </tbody>   
                </table>     
      </div>  
    </form> 

</body>

当你点击链接时，div的内容会发生变化，地址栏中的URL也会发生变化（例如mysite.com / page1.html上），但是如果刷新页面，浏览器当然会引用直接到文件page1.html。我在互联网上寻找解决方案，似乎在这种情况下我需要使用哈希，但我仍然不明白这应该如何工作。我请求帮助。

如何在更新div后正确刷新页面？

0 个答案: