Javascript不会在加载时运行。如何在HTML中修复？

我已经在选项卡上使用了Javascript，但在文档加载时它不起作用。当我把它放在JSFIDLE中（没有包装）时，它工作正常，没有任何错误如何使其负载运行？

我的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);

在

中使用JS操作小提琴如下：

当我在

load

上更改它时，非功能性的JS在这里：

我希望它在HTML中工作

---

提前感谢。

问题在于，您正在调用下面定义organic tabs插件。这在body-wrapped模式下工作，因为插件代码会立即执行，而对插件的调用会推迟到jQuery包装器准备好文档时（即

$（function（）{…}）

code）

使用

onLoad

，插件代码不会执行，因为它等待

onLoad

事件。因此，当事件触发时，它不知道插件，也不能调用它

还要注意，jQuery包装器带有

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

---

小提琴：开发者通常认为：

(function($) {
})();

它相当于

document.ready（）

，但它不是。在这里，没有必要准备好DOM。这是一个匿名函数，当浏览器解释ecma-/javascript时，它会尽快调用自己。这是一种定义范围的技术。要使其运行，请使用：

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

---

您可以按照这些步骤来获得预期的结果

您必须确保文档包含jquery库

然后您可以这样编写代码。默认情况下，将调用此函数

脚本标记开始

有机选项卡（）

脚本标记结束

---

关于

$（文档）。准备好了吗
我的朋友在使用它之前，你需要你
有机标签插件
上面的其余代码是的，我该怎么做呢？@Hardy，@PilotLook再次感谢你，插件代码在匿名函数中（这很有意义，可以防止代码进入全局名称空间），调用代码在
$（function（）{…}）
文档就绪包装。
$（function{…}）
没有文档就绪。这就是我要说的。它只是一个匿名函数，前面没有
$
，最后是一个额外的
（）
。。。