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

【问题标题】：TabScroll loads section once and then refreshes it a second time, it looks like section loads twiceTabScroll 加载部分一次，然后第二次刷新，看起来部分加载了两次
【发布时间】：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

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

【问题讨论】：

标签： html jquery css twitter-bootstrap-3

【解决方案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);
        });
    });
}

【讨论】：