如何让这两个javascript文件都工作?
A在index.html文件的末尾,我包含了两个脚本文件。其中一个文件处理使用jquery加载页面内容。另一个文件处理我的主页上的选项卡式内容区域,也就是jquery。如果我将选项卡内容区域的文件放在ajax页面加载文件的文件之后,那么选项卡可以工作,但页面加载的ajax不工作。如果我颠倒这些文件的顺序,那么页面加载ajax可以工作,但选项卡不能工作。这可能是什么原因造成的 以下是选项卡式内容的文件:如何让这两个javascript文件都工作?,javascript,jquery,ajax,Javascript,Jquery,Ajax,A在index.html文件的末尾,我包含了两个脚本文件。其中一个文件处理使用jquery加载页面内容。另一个文件处理我的主页上的选项卡式内容区域,也就是jquery。如果我将选项卡内容区域的文件放在ajax页面加载文件的文件之后,那么选项卡可以工作,但页面加载的ajax不工作。如果我颠倒这些文件的顺序,那么页面加载ajax可以工作,但选项卡不能工作。这可能是什么原因造成的 以下是选项卡式内容的文件: $(document).ready(function (){ initialize(); })
$(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
}
您正在创建具有相同名称的全局函数
initialize
更改这些函数的名称或仅更改其中一个。之后加载的函数将覆盖第一个问题在于两个函数的名称相同。为函数使用两个不同的名称。
这样就不需要添加两个页面加载处理程序。在后一个脚本中添加一个页面加载处理程序,并调用其中的两个方法。
假设您的两个函数是initialize()和init2(),然后在后一个js文件中使用
$(document).ready(function () {
initialize();
init2();
});