Javascript無法在加載時運行。我如何修復HTML？

我已經使用Javascript的標籤，但它不適用於文件加載。當我把它放在jsfiddle中（沒有換行）時，它可以正常工作，無任何錯誤。 如何使它在負載下運行？Javascript無法在加載時運行。我如何修復HTML？

我不是很擅長Javascript。

我的JavaScript代碼如下：

$(function() { 
    $("#content-switch").organicTabs(); 
}); 


// organicTabs plugin below 
// http://css-tricks.com/organic-tabs/ 
(function($) { 

    $.organicTabs = function(el, options) { 

     var base = this; 
     base.$el = $(el); 
     base.$nav = base.$el.find("#menunav"); 

     base.init = function() { 

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

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

      base.$nav.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("#menunav 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);

在<body>使用JS工作的小提琴是在這裏：當我改變它loadhttp://jsfiddle.net/wsk78/

和非功能性JS是在這裏：http://jsfiddle.net/mAm6x/

我希望它在HTML中工作...

在此先感謝。

來源

2014-03-03 Mohammed Hassan

怎麼樣'$（文件）。' – Hardy

我的朋友你需要你'organicTabs插件'上面的其餘代碼使用它 –

是的我該怎麼做謝謝@哈代，@試點 –

問題是，您正在定義調用它下面的有機標籤插件。這適用於身體包裝模式，因爲當插件的調用被推遲到您的jQuery包裝（$(function() { ... })代碼）準備好文檔時，插件代碼會立即執行。

隨着onLoad，插件代碼不會得到執行，因爲它等待在onLoad事件。所以當事件觸發時，它不知道該插件並且不能調用它。

另請注意，jQuery包裝is deemed incompatible與onLoad事件，所以我也刪除了這段代碼。

修復這樣的：

// organicTabs plugin below 
// http://css-tricks.com/organic-tabs/ 
(function($) { 
    $.organicTabs = function(el, options) { 

     var base = this; 
     base.$el = $(el); 
     base.$nav = base.$el.find("#menunav"); 

     base.init = function() { 

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

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

      base.$nav.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("#menunav 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); 

$("#content-switch").organicTabs();

小提琴：http://jsfiddle.net/mAm6x/3/

來源

2014-03-03 12:46:22 gpgekko

謝謝你的工作完成 –

通常開發商認爲：

(function($) { 
})();

它相當於document.ready()，但事實並非如此。這裏沒有必要準備好DOM。它是匿名函數，它在瀏覽器解釋你的ecma-/javascript時儘快調用它自己。這是一種定義範圍的技術。爲了使其運行使用：

$(document).ready(function(){ 
    //your code 
});

來源

2014-03-03 12:51:25

再看看，插件代碼是在一個匿名函數（這是有道理的，以防止代碼進入全局名稱空間），並且調用代碼在'$（function（）{...}）文檔準備好的包裝器中。 – gpgekko

'$（function {...}）'不是文檔準備好的。這就是我所說的。 –

它只是一個匿名函數，前面沒有'$'，後面有一個額外的'（）'... – gpgekko

您可以按照以下步驟讓您預期的結果

你必須保證，您的文檔包括jQuery庫。
然後你可以像這樣寫你的代碼。 Bydefault這個函數將被調用

腳本標籤開始

organicTabs（）;

腳本標記結束

來源

2014-03-03 12:58:54

Javascript無法在加載時運行。我如何修復HTML？

回答

相關問題