Question

在我的function.js文件中，我有两个函数：第一个使用ajax加载我的页面。另一个用于在我的主页上微调选项卡式内容。最初，这两个功能都有效。但是，当我单击任何一个菜单栏链接，然后单击主页链接返回到主页时，我的选项卡区域不再有效。我有一种感觉，只有在首次加载index.html时才会调用organictabs（）函数。如何更改此设置，以便每次加载新页面时都调用organictabs（）？

// remap jQuery to $
(function($){})(window.jQuery);


/* trigger when page is ready */
$(document).ready(function (){
    initialize();

});

function initialize() {
    //Click on nav to load external content through AJAX
    $('#topnav a, #bottomnav a').not('#bottomnav #fbcallus a').click(function(e){

        e.preventDefault();

        $('#pages').load( e.target.href + ' #loadcontent'); //pages finished loading
    }); //clicked on nav
    //handle AJAX for left nav
$(function() {
        $("#tabedarea").organicTabs();
    });


}



    //Click on nav to load external content through AJAX
    // $('#topnav a').click(function(e){
    //  e.preventDefault();
    //  $('#pages').load( e.target.href + ' #loadcontent'); //pages finished loading
    // }); //clicked on nav



(function($) {

    $.organicTabs = function(el, options) {

        var base = this;
        base.$el = $(el);
        base.$navtabs = base.$el.find(".navtabs");

        base.init = function() {

            base.options = $.extend({},$.organicTabs.defaultOptions, options);

            // Accessible hiding fix
            $(".hidetabs").css({
                "position": "relative",
                "top": 0,
                "left": 0,
                "display": "none"
            }); 

            base.$navtabs.delegate("li > a", "click", function() {

                // Figure out current list via CSS class
                var curList = base.$el.find("a.current").attr("href").substring(1),

                // List moving to
                    $newList = $(this),

                // Figure out ID of new list
                    listID = $newList.attr("href").substring(1),

                // Set outer wrapper height to (static) height of current inner list
                    $allListWrap = base.$el.find(".list-wrap"),
                    curListHeight = $allListWrap.height();
                $allListWrap.height(curListHeight);

                if ((listID != curList) && ( base.$el.find(":animated").length == 0)) {

                    // Fade out current list
                    base.$el.find("#"+curList).fadeOut(base.options.speed, function() {

                        // Fade in new list on callback
                        base.$el.find("#"+listID).fadeIn(base.options.speed);

                        // Adjust outer wrapper to fit new list snuggly
                        //var newHeight = base.$el.find("#"+listID).height();
                        //$allListWrap.animate({
                        //    height: newHeight
                        //});

                        // Remove highlighting - Add to just-clicked tab
                        base.$el.find(".navtabs li a").removeClass("current");
                        $newList.addClass("current");

                    });

                }   

                // Don't behave like a regular link
                // Stop propegation and bubbling
                return false;
            });

        };
        base.init();
    };

    $.organicTabs.defaultOptions = {
        "speed": 300
    };

    $.fn.organicTabs = function(options) {
        return this.each(function() {
            (new $.organicTabs(this, options));
        });
    };

})(jQuery);

Answer 1

在jquery加载上使用完整的函数将解决您的问题我相信：

function initialize() {
//Click on nav to load external content through AJAX
$('#topnav a, #bottomnav a').not('#bottomnav #fbcallus a').click(function(e){

    e.preventDefault();

    $('#pages').load( e.target.href + ' #loadcontent', function() { $("#tabedarea").organicTabs(); }); //pages finished loading
});
}

如何在单击导航菜单栏链接后使此功能正常工作？

1 个答案: