Jquery函数在页面重定向后执行？

12 浏览
0 Comments

Jquery函数在页面重定向后执行？

看看这个代码片段！

代码片段

我希望能够通过类似示例中页脚链接的方式，能够链接到内容区域的不同部分。然而，当在网站的不同页面上点击链接时，我希望这个功能（滚动到/打开相应的部分）也能够起作用。有人建议使用Anglers路由系统，但我不知道API历史记录或其他方法如何工作，也不知道如何实现它们。我找到了另外两个解决方案，但无法弄清楚如何实施。

解决方案1？

解决方案2？

HTML

  
            
                 
blah blah

                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,
                ...
                 
twit twoo

                Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,
                ...
            
                 
Sit Amet

                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,
                ...
                 
lorem ipsum

                Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,
                ...
            Twit Twoo
            
            lorem ipsum

CSS

    .content-slide-menu {
        float:left;
        width:220px;
        padding:0 10px;
    }
    .content-slide-menu li {
        list-style-type:none;
    }
    .content-slide-menu a {
        text-decoration:none;
        color:#2b2b2b;
        font-size:135%;
    }
    .content-slide-menu a:hover {
        color:#3ca3c5;
    }
    .content-slide {
        float:left;
        width:440px;
        margin-top:65px;
    }
    .content-slide .content {
        display:none;
    }
    .content-slide .content h3 {
        font-size: 150%;
        font-weight: bold;
    }
    .content-slide .content p {
        margin:5px 0;
        font-size:110%;
    }
    .dots {
        font-size:350%;
        font-weight:bold;
    }
    .active {
        color:#3ca3c5!important;
    }
    #footer {margin-top:800px;}

Script

 function showPage(menu, page) {
            $slider = $(".content-slide-menu[data-menu='" + menu + "']").first();
            $slider.next().children('.content').hide();
            $("#page" + page).show();
            $slider.find('a.active').removeClass("active");
            $("#link" + page).children().addClass('active');
        }
        function showAndScroll(menu, page) {
            showPage(menu, page);
            $('html, body').animate({
                scrollTop: $slider = $(".content-slide-menu[data-menu='" + menu + "']").first().offset().top
            }, 1000);
        }
        $(document).ready(function () {
            $(".menu a").click(function () {
                var $this = $(this),
                    $slider = $this.closest('.content-slide-menu');
                showPage($slider.data("menu"), $this.data("page"));
            });
            $(".content-slide-menu").each(function(index, that) {
                showPage($(that).data('menu'), $(that).find("a").first().data('page'));
            });
        });

0

1 答案

0 Comments

问题的原因是在页面重定向后使用jQuery函数的问题。解决方法是使用一个带有页面ID的哈希值来执行滚动动画，并在页面加载时获取哈希值并执行相应的滚动和显示页面操作。

在页面加载时，需要获取哈希值并提取页面ID。然后使用showAndScroll函数来执行滚动和显示页面的操作。

代码示例：

function showPage(page) {
    //显示目标页面并隐藏其他页面
    $("#page" + page).show().siblings().hide();
    $("#link" + page).children().addClass('active').parent().siblings().children().removeClass('active');
}
function showAndScroll(page) {
    showPage(page);
    $('html, body').animate({
        scrollTop: $("#link" + page).closest('.content-slide-menu').offset().top
    }, 1000);
}
$(document).ready(function () {
    $(".menu a").click(function () {
        var $this = $(this);
        showPage($this.data("page"));
    });
    $(".content-slide-menu").each(function () {
        showPage($(this).find("a").first().data('page'));
    });
    //在DOM准备完毕时获取哈希值并执行滚动和显示页面的操作
    var hash = window.location.hash;
    var page = hash.replace(/[^0-9]/g, '');
    showAndScroll(page);
});

在其他页面中，链接应该按照以下格式：

Twit Twoo

这样就可以在页面重定向后正确执行滚动和显示页面的操作了。

0