页面重定向后的Jquery函数？

Posted 2023-03-10

【中文标题】页面重定向后的Jquery函数？

【英文标题】：Jquery function after page redirect?

【发布时间】：2014-01-19 18:03:46

【问题描述】：

看看小提琴！

The Fiddle

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

Solution1? Solution2?

HTML

  <div class="content-slide-menu" data-menu="1">
            <ul class="menu">
                <li id="link1"> <a href="#null" data-page="1">blah blah</a>

                </li>
                <li id="link2"> <a href="#null" data-page="2">twit twoo</a>

                </li>
            </ul>
        </div>
        <div class="content-slide">
            <div id="page1" class="content">
                 <h3>blah blah</h3>

                <p>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,</p>
                <div class="dots"><span>...</span>
                </div>
            </div>
            <div id="page2" class="content">
                 <h3>twit twoo</h3>

                <p>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,</p>
                <div class="dots"><span>...</span>
                </div>
            </div>
        </div>
        <div style="clear:both;"></div>
        <div class="content-slide-menu" data-menu="2">
            <ul class="menu">
                <li id="link3"> <a href="#null" data-page="3">Sit Amet</a>

                </li>
                <li id="link4"> <a href="#null" data-page="4">lorem ipsum</a>

                </li>
            </ul>
        </div>
        <div class="content-slide">
            <div id="page3" class="content">
                 <h3>Sit Amet</h3>

                <p>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,</p>
                <div class="dots"><span>...</span>
                </div>
            </div>
            <div id="page4" class="content">
                 <h3>lorem ipsum</h3>

                <p>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,</p>
                <div class="dots"><span>...</span>
                </div>
            </div>
        </div>
        <div style="clear:both;"></div>
        <div id="footer"> 
            <a href="javascript:showAndScroll(1, 2)" title="Twit Twoo" id="twit-twoo">Twit Twoo</a>
            <br>
            <a href="javascript:showAndScroll(2, 4)" title="lorem ipsum" id="lorem-ipsum">lorem ipsum</a>
        </div>

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;

脚本

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

【问题讨论】：

你想根据 URL 片段执行一些功能吗？检查此链接 (***.com/questions/19285423/…)。

我想我对任何允许我的链接在我的网站的任何页面上工作的功能都开放，就像我的例子一样。

【参考方案1】：

实际上没有什么好的方法可以防止默认的哈希跳转执行，尤其是在页面加载时，因为每个浏览器对此都有不同的行为。

在 chrome 上，我之前尝试过类似的方法，它可以工作，但在其他浏览器上却不行：

$(window).load(function() 
    $(window).scrollTop(0);
    //and do your animate scrolling
);

但是有一个很好的技巧，你可以传递一个哈希，它在你的 html 上没有确切的 id，但至少应该有 page-id。

我认为在您的脚本中，您不需要根据您的标记结构和您想要实现的目标传递 menu 参数，只需一个 page 参数就可以了。

脚本：

function showPage(page) 
    //show the target page and hide siblings
    $("#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'));
    );
    //on DOM ready get the hash value and extract the page id number 
    var hash = window.location.hash,
        page = hash.replace(/[^0-9]/g, '');
    //then execute showAndScroll to this page
    showAndScroll(page);

);

在您的其他页面上，您的链接应该是这样的：

<a href="page.html#page-2" title="Twit Twoo">Twit Twoo</a>

Jsfiddle demo.

【讨论】：

不要以为你更新了小提琴 :P 但今晚晚些时候我会尝试一下，让你知道结果。我的骑士穿着闪亮的 jquery 盔甲！

工作正常，除了我在实际页面上。滚动到该部分，但未打开相关页面