0

Делаю, чтобы содержимое обновлялось при нажатии на ссылку.

Script

    <script src = "history.js/scripts/bundled/html4+html5/jquery.history.js"> </script>
    <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);
        loadPage(linkLocation);


    return false;
    });

    function loadPage(url) {            
        $('.content').load(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></body>

Page1.html

    ...
    <body>
    <h1>№ 1</h1>
    <p>Вася Пупкин</p>
    <br>
    <form action =select.php method=get>    
            <div align=center>Пиши сюда<input type=text name=param1> <br><br>
                <table border=0 width=80%>
                    <tbody>
                        <tr>
                            <td align=center> <input type=reset   value= Очистить > </td>
                            <td align=center>  <input type=submit name=send value= Отправить>   </td> 
                            <td align=center> <input type="button" onClick="history.back();" value="Назад"/> </td>
                        </tr>  
                    </tbody>   
                </table>     
      </div>  
    </form> 

</body>

При нажатии на ссылку, содержимое div меняется, а в адресной строке меняется URL(допустим на mysite.ru/page1.html), но если обновить страницу, браузер, ясное дело, обращается непосредственно к самому файлу page1.html. Я искал решение в Интернете, кажется. в этой ситуации нужно использовать хэш, но я все равно не понимаю, каким образом это должно работать. Прошу помощи.

5
  • Это надо реализовать серверной части... А не клиентской...
    – Air
    6 мая 2018 в 21:42
  • @Air, да это курсач, тут можно) 6 мая 2018 в 21:48
  • а сам jQuery подключен ?
    – user33274
    6 мая 2018 в 22:18
  • @Максим-Ленский, да, подключен. 7 мая 2018 в 3:41
  • Ты можешь URL "страницы" положить за решетку, то есть вместо mysite.ru/page1.html сделать mysite.ru#page1.html. В этом случае браузер будет подгружать ту же страницу из корня, а потом искать якорь с именем page1.html, и если найдет видимый якорь с таким ID, то промотает к нему. Дальше при загрузке страницы тебе просто надо будет через JS определить текущую страницу и показать именно ее
    – wirtwelt
    7 мая 2018 в 6:27

1 ответ 1

0

У тебя jQuery НЕ подключен.. вот эта ссылка никуда не ведёт...

history.js/scripts/bundled/html4+html5/jquery.history.js

Вместо:

  <script src = "history.js/scripts/bundled/html4+html5/jquery.history.js"> </script>

Пропиши:

  <script src = "https://code.jquery.com/jquery-3.3.1.min.js"> </script>

P.S То что ты пытаешься сделать без хотя бы локального сервера не получиться.

4
  • у меня все было подключено, просто я не скопировал эту строку. А файл history.js лежит в папке. С подключением проблем нет, скрипт работает 7 мая 2018 в 14:03
  • Хорошо, но тогда другая проблема, это надо делать локально, так как он ругается на отсутствие http протокола.
    – Zicrael
    7 мая 2018 в 14:04
  • @Ziclear, да, это все крутится на localhost (denwer) 7 мая 2018 в 16:52
  • И даже с localhost не работает? В чем конкретно проблема? При обновлении страницы тебе надо что бы браузер шёл на "домашнюю" страницу?
    – Zicrael
    8 мая 2018 в 4:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.