引导远程选项卡 - 加载第一个选项卡

我正在使用bootstrap-remote-data库来远程加载数据，因为我必须在每个选项卡上加载大量数据。

问题是，每当加载我的页面时，页面加载时不会加载第一个选项卡;我需要单击另一个选项卡，然后返回第一个选项卡，以便它加载第一个选项卡。

上面的库包含 "loadFirstTab：" 变量的功能，可以设置为 true 或 false，但无论变量是真还是假 - 它永远不会加载第一个选项卡。

几个小时以来一直试图使用 JS 类和我的 HTML，但无法正常工作并加载我的第一个选项卡。

这是我的HTML的样子：

<li class="active"><a data-toggle="tab" href="#tab1" data-tab-url="tab1.php">Tab 1 - Never loaded on page load!</a></li>
  <li><a data-toggle="tab" href="#tab2" data-tab-url="tab2.php">">Tab2</a></li>
  <li><a data-toggle="tab" href="#tab3">Tab 3</a></li>
  <li><a data-toggle="tab" href="#tab4">Tab 4</a></li>
<div class="tab-content well">
  <div id="tab1" class="tab-pane fade in active" style="min-height:300px">
<h3>Loading data, please wait..</h3>
  </div>
  <div id="tab2" class="tab-pane fade in" style="min-height:300px">
<h3>Loading data, please wait..</h3>
  </div>
<div id="tab3 class="tab-pane fade in" style="min-height:300px">
    <h3>Data for tab 3</h3>
      </div>
<div id="tab4" class="tab-pane fade in" style="min-height:300px">
    <h3>Data for tab 4</h3>
      </div>

JS类：

var $ = jQuery;
/*!
 *
 * Bootstrap remote data tabs plugin
 * Version 1.2.0
 *
 * Author: Stephen Hoogendijk (TheCodeAssassin)
 *
 * Licensed under the GPLV2 license.
 *
 * @returns {{hasLoadingMask: boolean, load: Function, _executeRemoteCall: Function}}
 * @constructor
 */
 var bootstrapRemoteTabSettings = {
   customLoadFn: function(isLoading) {
      var loader = $('.custom-loader');
      if (isLoading) {
        loader.show();
      } else {
        loader.hide();
      }
   },
   loadFirstTab: true
}
var hasLoadingMask = (jQuery().mask ? true : false),
    bootstrapVersion2 = (jQuery().typeahead ? true : false),
// hook the event based on the version of bootstrap
    tabShowEvent = (bootstrapVersion2 ? 'show' : 'show.bs.tab'),
    accordionShowEvent = (bootstrapVersion2 ? 'show' : 'show.bs.collapse'),
    defaultSettings = {
        customLoadFn: null,
        loadFirstTab: true
    },
    customSettings = $.extend({}, defaultSettings);

if (typeof bootstrapRemoteTabSettings != 'undefined') {
    customSettings = $.extend({}, bootstrapRemoteTabSettings);
}
$(function () {
    // try to navigate to the tab/accordion last given in the URL
    var hash = document.location.hash,
        firstTab;
    if (hash) {
        var realHash = hash.split('bs-tab-')[1],
            hasTab = $('[data-toggle=tab][href*=' + realHash + ']');
        if (hasTab) {
            hasTab.click();
        }
        var hasAccordion = $('[data-toggle=collapse][href=' + hash + ']');
        if (hasAccordion) {
            // for some reason we cannot execute the 'show' event for an accordion properly, so here's a workaround
            if (hasAccordion[0] != $('[data-toggle=collapse]:first')[0]) {
                hasAccordion.click();
            }
        }
    }
    firstTab = $('[data-toggle=tab]:first, [data-toggle=collapse]:first');
    if (!customSettings.loadFirstTab && !hasTab) {
        firstTab.click();
    }
});
var RemoteTabs = function (settings) {
    var obj = {
        hasLoadingMask: false,
        settings: settings,
        customLoadFn: settings.customLoadFn,
        /**
         *
         * @param tabEvent
         * @param hasLoadingMask
         */
        load: function (hasLoadingMask) {
            var me = this;
            me.hasLoadingMask = !!hasLoadingMask;
            // enable all remote data tabs
            $('[data-toggle=tab], [data-toggle=collapse]').each(function (k, obj) {
                var bsObj = $(obj),
                    bsDiv,
                    bsData,
                    bsCallback,
                    url,
                    simulateDelay,
                    alwaysRefresh,
                    hasOpenPanel = false,
                    originalObj,
                    showEvent,
                    hash;

                if (typeof bsObj != 'undefined') {
                    if (bsObj.attr('href')) {
                        hash = bsObj.attr('href').split('#')[1];
                        // prevent default hash actions
                        bsObj.on('click', function (e) {
                            $(this).tab('show');
                            window.location.hash = 'bs-tab-'+hash;
                            e.preventDefault();
                        });
                        // check if the tab has a data-url property
                        if (bsObj.is('[data-tab-url]')) {
                            url = bsObj.attr('data-tab-url');
                            bsDiv = $('#' + hash);
                            bsData = bsObj.attr('data-tab-json') || [];
                            bsCallback = bsObj.attr('data-tab-callback') || null;
                            simulateDelay = bsObj.attr('data-tab-delay') || null;
                            alwaysRefresh = (bsObj.is('[data-tab-always-refresh]')
                            && bsObj.attr('data-tab-always-refresh') == 'true') || null;
                            originalObj = bsObj;
                            showEvent = (bsObj.attr('data-toggle') == 'tab' ? tabShowEvent : accordionShowEvent);
                            if (bsData.length > 0) {
                                try {
                                    bsData = $.parseJSON(bsData);
                                } catch (exc) {
                                    console.log('Invalid json passed to data-tab-json');
                                    console.log(exc);
                                }
                            }
                            if (showEvent == accordionShowEvent) {
                                hasOpenPanel = bsDiv.hasClass('in');
                                // when an accordion is triggered, make the div the triggered object instead of the link
                                if (bootstrapVersion2) {
                                    bsObj = bsObj.parent();
                                } else {
                                    bsObj = bsObj.parents('.panel');
                                }
                                // If there is a panel already opened, make sure the data url is fetched
                                if (hasOpenPanel) {
                                    me._triggerChange(null, url, bsData, bsCallback, bsObj, bsDiv, simulateDelay, alwaysRefresh, originalObj);
                                }
                            }
                            bsObj.on(showEvent, function (e) {
                                me._triggerChange(e, url, bsData, bsCallback, bsObj, bsDiv, simulateDelay, alwaysRefresh, originalObj);
                            });
                        }
                    }
                }
            });
        },
        /**
         * Trigger the change
         *
         * @param e
         * @param url
         * @param bsData
         * @param bsCallback
         * @param bsObj
         * @param bsDiv
         * @param simulateDelay
         * @param alwaysRefresh
         * @param originalObj
         */
        _triggerChange: function (e, url, bsData, bsCallback, bsObj, bsDiv, simulateDelay, alwaysRefresh, originalObj) {
            var me = this;
            // change the hash of the location
            if (e) {
                if (typeof e.target.hash != 'undefined') {
                    window.location.hash = e.target.hash;
                } else {
                    window.location.hash = originalObj.prop('hash');
                }
            }
            if ((!bsObj.hasClass("loaded") || alwaysRefresh) && !bsObj.hasClass('loading')) {
                if (me.customLoadFn) {
                    me.customLoadFn(me, true, bsDiv);
                }
                if (me.hasLoadingMask && !me.settings.custom) {
                    bsDiv.mask('Loading...');
                }
                bsObj.addClass('loading');
                // delay the json call if it has been given a value
                if (simulateDelay) {
                    clearTimeout(window.timer);
                    window.timer = setTimeout(function () {
                        me._executeRemoteCall(url, bsData, bsCallback, bsObj, bsDiv);
                    }, simulateDelay);
                } else {
                    me._executeRemoteCall(url, bsData, bsCallback, bsObj, bsDiv);
                }

            }
        },

        /**
         * Execute the remote call
         * @param url
         * @param customData
         * @param callbackFn
         * @param trigger
         * @param dataContainer
         * @private
         */
        _executeRemoteCall: function (url, customData, callbackFn, trigger, dataContainer) {
            var me = this;

            $.ajax({
                url: url,
                data: customData || [],
                success: function (data) {
                    trigger.removeClass('loading');
                    if (me.customLoadFn) {
                        me.customLoadFn(me, false, dataContainer);
                    }
                    if (me.hasLoadingMask) {
                        dataContainer.unmask();
                    }
                    if (data) {
                        if (typeof window[callbackFn] == 'function') {
                            window[callbackFn].call(null, data, trigger, dataContainer, customData);
                        }
                        if (!trigger.hasClass("loaded")) {
                            trigger.addClass("loaded");
                        }
                        dataContainer.html(data);
                    }
                },
                error: function (data, status, error) {
                    dataContainer.html("An error occured while loading the data: " + error);
                    trigger.removeClass('loading');
                    if (me.customLoadFn) {
                        me.customLoadFn(me, false, dataContainer);
                    }
                    if (me.hasLoadingMask) {
                        dataContainer.unmask();
                    }
                }
            });
        }
    };
    obj.load(hasLoadingMask);
    return obj;
};
var remoteTabsPluginLoaded = new RemoteTabs(customSettings);