Аякса навигации разные папки

Question

Прежде всего позвольте мне показать структуру папок

основной (папку)

страниц (папок), так и внутри папки страниц у меня есть 5 страниц HTML. и в основной папке у меня есть JS, index.php и load.php

Heres код для index.php

<header> 
     <nav> 
      <ul> 
       <li><a href="#page1" class="active" id="page1-link">Page 1</a></li> 
       <li><a href="#page2" id="page2-link">Page 2</a></li> 
       <li><a href="#page3" id="page3-link">Page 3</a></li> 
       <li><a href="#page4" id="page4-link">Page 4</a></li> 
      </ul> 
     </nav> 
</header> 

<div id="main-content"> 
    <?php include('pages/page1.html'); ?> 
</div> 

Я сделал AJAX навигации и проблемы я прямо сейчас Я не знаю, как сделать ссылку внутри страниц (папка) перейти на другую определенную страницу, не освежая тоже.

Код работает нормально, но что, если у меня есть ссылка внутри страниц (папка), которая является, например: page1, и я хочу, чтобы она переходила на другую определенную страницу без обновления.

Я попытался создать пользовательский js снова внутри страниц (папка), но он не работает. Есть ли другой способ?

Answer 1

Я напишу свое решение, которое я использовал, используя jQuery. Идея заключается в том пошлешь пользовательские parametar страницы вы хотите загрузить через URL.I надеюсь, что это то, что вы стремитесь к

Пример test.com # = MYPAGE с просмотрами страниц,

Идея заключается в следующем, у вас есть mainPage.html и его js-файл. Внутри mainPage.html есть div с основным содержанием класса.

В файле mainpage js вы проверяете изменение хеша для pageView. Чтение URL-адреса, который должен быть something.com # pageView = yourPage, вы получаете страницу, которую хотите открыть, в данном случае yourPage.

Мы загружаем страницу с помощью jquery через селектор div и функцию .load, я установил, что он находится внутри страниц папок, вы можете отправить все местоположение страницы через URL-адрес, например, something.com # pageView = location/связанных с просмотрами страниц

чтобы получить доступ к URL мы сделаем функцию getUrlVars

function getUrlVars() { 
    var vars = [], hash; 
    var indexofHash = window.location.href.indexOf('#'); 
    var hashes; 
    if (indexofHash == -1) { 
     hashes = window.location.href.slice((window.location.href.indexOf('?')) + 1).split('&'); 
    } else { 
     hashes = window.location.href.slice((window.location.href.indexOf('#')) + 1).split('&'); 
    } 
    for (var i = 0; i < hashes.length; i++) { 
     hash = hashes[i].split('='); 
     vars.push(hash[0]); 
     vars[hash[0]] = hash[1]; 
    } 
    return vars; 
} 

Таким образом, наши JS должны иметь на документ готов, чтобы проверить, какие страницы мы хотим загрузить, и на # Сменить.

var $pageView = $('.main-content') 

$(document).on('ready', function() { 
     var loadPage = getUrlVars()["pageView"] 
     if(loadPage == undefined || loadPage == ''){ //Load home page 
      $pageView.load("pages/home.html", function() { 
       //After load 
      }); 
     }else{ 
      $pageView.load("pages/"+loadPage+".html",function(){ 
       //After page load 
      }) 
     } 
    }); 

И это preaty # Сменить много же

$(window).on('hashchange', function (e) { 
    var loadPage = getUrlVars()["pageView"] 
    if (loadPage == undefined && loadPage == '') { 
     $pageView.load("pages/home.html", function() { 
      //After page load 
     }); 
    } else { 
     $pageView.load("pages/" + loadPage + ".html", function() { 
      //After page load 
     }); 
    } 
}); 

Вы можете добавить загрузчик в начале функций, и удалить их после загрузки страницы.

Теперь HREF должен выглядеть как-то вроде HREF = «# = стр.1 с просмотрами страниц,»