0

index.htmlファイルの終わり2つのスクリプトファイルを含めています。ファイルの1つは、jqueryを使用したページコンテンツの読み込みを処理します。もう1つのファイルは、ホームページのタブ付きコンテンツ領域の操作を処理します。これもjqueryです。ajaxページロードファイルのファイルの後にタブ付きコンテンツ領域のファイルを配置すると、タブは機能しますが、ページロードのajaxは機能しません。これらのファイルの順序を逆にすると、ページの読み込みajaxは機能しますが、タブは機能しません。これを引き起こしている可能性がありますか？

タブ付きコンテンツのファイルは次のとおりです。

$(document).ready(function (){
initialize();
});

function initialize() {
//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() {

    $("#tabedarea").organicTabs();

    $("tabedarea").organicTabs({
        "speed": 200
    });
});
}

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

そして、これがページロードajaxのファイルです：

// 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

}
4

2 に答える 2

1

同じ名前でグローバル関数を作成しているinitializeので、それらの名前を変更するか、1つだけ変更してください。後でロードされるものは最初のものをオーバーライドします

于 2012-04-16T03:44:38.317 に答える
0

問題は、両方の関数に同じ名前を付けることです。関数には2つの異なる名前を使用します。次に、2つのページロードハンドラーを追加する必要はありません。後者のスクリプトに単一のページロードハンドラーを追加し、その中で2つのメソッドを呼び出します。2つの関数がinitialize（）とinit2（）であるとすると、後者のjsファイルでは

$(document).ready(function () {
   initialize();
   init2();
});
于 2012-04-16T03:46:52.553 に答える