TabScroll 加载部分一次，然后第二次刷新，看起来部分加载了两次

Posted 2023-03-06

技术标签:

【中文标题】TabScroll 加载部分一次，然后第二次刷新，看起来部分加载了两次【英文标题】：TabScroll loads section once and then refreshes it a second time, it looks like section loads twice 【发布时间】：2021-12-21 15:18:50 【问题描述】：

如果我将$(window).on("hashchange", function(event) 更改为$(document).on("hashchange", function(event) tabscroll 加载部分一次而不进行第二次刷新并且加载看起来不错，但它在 IE9、10、11 中不起作用。

index.html

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="main.js"></script>
    <link href="main.css" rel="stylesheet" type="text/css" />
</head>
    <body>
        <div id="wrapper">
            <div class="loader"></div>
            <div class="load-here">
                <div class="tabscroll" data-tabscroll-nav>
                    <a href="#3">test 3</a>
                    <a href="#2">test 2</a>
                    <a href="#1">test 1</a>
                </div>
            </div>
            <br><br>
            <article>
                <section id="3">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</section>
                <section id="2">"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio."</section>
                <section id="1">"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain."</section>
            </article>
        </div>
    </body>
<html>

加载内容的main.js是基于https://css-tricks.com/rethinking-dynamic-page-replacing-content我自己修改的。

$(document).ready(function() 
    $(".ajax").ajax();
    $.tabScroll();
);
$.fn.ajax = function() 
    $("#wrapper").on("click", ".ajax", function() 
        var loadLink = $(this).attr("href");
        window.history.pushState(null, null, loadLink);
        loadContent(loadLink);
        return false;
    );

    function loadContent(href) 
        $(".dropdown").removeClass("open");
        $(".load-here").fadeOut(150, function() 
            $(".loader").show();
            $(this).load(href + " .load-here > * ", function() 
                $(".loader").hide();
                $(".load-here").fadeIn(150);
                $.tabScroll();
                console.log(href);
            );
        );
    
    $(window).on("popstate", function() 
        loadLink = location.pathname.replace(/^.*[\\\/]/, "");
        loadContent(loadLink);
    );

$.tabScroll = function() 
    $tabscroll = $("[data-tabscroll-nav]").find("a");
    $($tabscroll[0]).parent().addClass("active-tab");
    for ($i = 0; $i < $tabscroll.length; $i++) 
        var $anchor = $($tabscroll[$i]).attr("href");
        $($tabscroll[$i]).parent().attr("data-tabscroll-nav", $anchor.substring(1));
        $($anchor).attr("data-tabscroll", $anchor.substring(1));
    
    $("[data-tabscroll]").removeAttr('id');
    $("[data-tabscroll]:first-of-type").siblings("[data-tabscroll]").hide();
    $("[data-tabscroll-nav] [href^='#']").on("click", function(event) 
        var $href = $(this).attr("href");
        location.hash = $href;
    );
    $(window).on("hashchange", function(event) 
        //var $location = window.location.hash.split("#")[1];
        var $location = String(document.location);
        $location = $location = $location.split("#")[1];
        if ($location === undefined) 
            $("[data-tabscroll]:first-of-type").show();
         else 
            $("[data-tabscroll]").hide();
            $("[data-tabscroll='" + $location + "']").show();
            $("[data-tabscrollnavi]").removeClass("active-tab");
            $("[data-tabscrollnavi='" + $location + "']").addClass("active-tab");
        
    ).trigger('hashchange');

main.css

.tabscroll 
    list-style-type: none;
    padding: 0;
    clear: both;
    overflow: hidden;
    text-align: center;

TabScroll 来自https://github.com/justMoritz/tabscroll.js

感谢您对如何解决我的问题提出任何建议。

【问题讨论】：

【参考方案1】：

我找到了解决办法：

function loadContent(href)
    $(".dropdown").removeClass("open");
    $(".load-here").fadeOut(0, function()
        $(".loader").show();
        $(this).load(href + " .load-here > * ", function()
            $(".loader").delay(250).fadeOut(0);
            $(".load-here").delay(250).fadeIn(0, function()
                $.tabScroll();                  
            ); 
            console.log(href);
        );
    );

【讨论】：

以上是关于TabScroll 加载部分一次，然后第二次刷新，看起来部分加载了两次的主要内容，如果未能解决你的问题，请参考以下文章

intellij idea 调试web项目只能调试一次，第二次不能进入断点

用click事件调用ajax 第一次点击有用，第二次就失效了

Echarts图刷新后无变化

iframe 调整大小在 Mozilla Firefox 中的第二次加载期间不起作用

JS问题。为啥onclick事件单击一次后，在页面无刷新的情况下，单击第二次无效？

jquery easyUI 第一次点击按钮加载两个tab的datagrid 脚本报undefined的弹出框，第二次就正常不报错了呢