我已将 Javascript 用于选项卡，但它不适用于文档加载。当我将它放入 jsfiddle 中(Nowrapper-in)时，它工作正常，没有任何错误。 如何让它在负载下运行？
我不太擅长 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 进行工作在这里:http://jsfiddle.net/wsk78/
当我在 load 上更改它时，JS 无法正常工作在这里:http://jsfiddle.net/mAm6x/
我希望它能在 HTML 中工作...
提前致谢。
最佳答案
问题是您在调用它的下方定义了有机选项卡插件。这在主体包装模式下有效，因为插件代码会立即执行，而对插件的调用会被推迟，直到 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();
fiddle :http://jsfiddle.net/mAm6x/3/
关于JavaScript 不会在加载时运行。如何在 HTML 中修复？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22147131/