Question

首先让我展示文件夹结构

主（文件夹）

页面（文件夹）和内页文件夹我有5个html页面。在主文件夹中我有js，index.php和load.php

继承了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编写我以前使用的解决方案。我的想法是你会发送你想通过URL加载的页面的自定义参数。我希望这是你的目标

示例test.com＃pageView = myPage

接下来，你有了mainPage.html及其js文件。在mainPage.html里面有div类主要内容。

在mainPage js文件中，您正在检查pageViews的哈希更改。阅读应该是something.com #pageView = yourPage的网址，你会得到你要打开的页面，在本例中是你的页面。

我们正在通过div选择器和.load函数加载jquery页面，我已修复它进入文件夹页面，你也可以通过url发送页面的整个位置，例如something.com＃pageView = location / pageView

要访问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应该准备好文档，检查我们要加载哪个页面，以及#change。

 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
            })
        } 
    });

在#change上非常相似

$(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 =“＃pageView = page1”

ajax导航不同的文件夹

1 个答案: