Question

点击链接后，我在页面上加载了一个fullPage滑块。

这是index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <title>Title</title>
  <link rel="stylesheet" href="css/main.css">
</head>
<body>

<section id="introduction">
    <a class="half-intro page-link" href="intuitive-office.html"></a>
    <a class="half-intro page-link" href="intuitive-estate.html"></a>
</section>

<main id="main-container"></main>

<script src="js/j.js"></script>
</body>
</html>

点击intuitive-office.html时，该页面中的内容会加载到<main id="main-container"></main>。

中

工作正常，fullPage.js也可以，但只能在鼠标滚动。导航点根本不起作用。当我从intu-office.html点击它们时它们可以正常工作，但是当使用jquery load拉入fullPage滑块时它们不会工作。

这是来自intuitive-office.html页面的内容

<main>
    <div id="scroll-container">
        <section class="section">
            <div class="centered">
                <h2>This is some text</h2>
            </div>
        </section>
        <section class="section">
            <div class="centered">
                <h2>This is some text 2</h2>
            </div>
        </section>
        <section class="section">
            <div class="centered">
                <h2>This is some text 3</h2>
            </div>
        </section>
    </div>
</main>

这是我正在使用的剧本

(function($){

    var pageScroll = function(){
        $('#scroll-container').fullpage({
            navigation: true,
            navigationPosition: 'right'
        });
    };
    pageScroll();

    // load content
    String.prototype.decodeHTML = function() {
        return $("<div>", {html: "" + this}).html();
    };

    var $main = $("main"),

    init = function() {
        pageScroll();
    },

    ajaxLoad = function(html) {
        document.title = html
        .match(/<title>(.*?)<\/title>/)[1]
        .trim()
        .decodeHTML();

        init();
    },

    loadPage = function(href) {
        $main.load(href + " main>*", ajaxLoad);
    };

    //init();

    $(window).on("popstate", function(e) {
        if (e.originalEvent.state !== null) {
            loadPage(location.href);
        }
    });

    $(document).on("click", ".page-link", function() {
        var href = $(this).attr("href");

        if (href.indexOf(document.domain) > -1 || href.indexOf(':') === -1) {
            history.pushState({}, '', href);
            loadPage(href);
            return false;
        }
    });

})(jQuery);

在jquery加载内容后，fullPage.js导航无法正常工作

0 个答案: