编辑:我已经做了一些故障排除来帮助并尝试确定问题可能出在哪里...如果单击“个人”链接并允许 personal/personal.html 作为普通链接继续执行，它会完美地执行每个时间。问题似乎是将/personal/personal.html 插入到 index.html 的#content_container 中……在这个问题上，Firefox 似乎比 chrom 更喜怒无常。/编辑
实例:http://www.dstpc.ca/Beta/index.html
我正在使用预制的 Tabs JQuery 和 CSS 文件来实现我想要的外观和功能。
到目前为止，我已经能够引用 JQuery 和 CSS 文件，并在向上或向下滑动另一个 div 时用 html 文档替换 1 个 div 的内容，这会导致根据链接绘制或删除底部边框跟着。以下这些操作不会失败，始终准确。
发生的事情是“personal.html”偶尔会出乎意料地无法正确调用 JQuery 或 CSS 文件。这样标题和 div 中就没有制表符或格式，只有黑色文本。我要补充一点，第一次加载几乎每次都能正常工作，但我想避免使用简单的刷新方法，以便数据保持尽可能低且速度很快。我发现随后在“Home”和“Personal”之间点击以测试功能与我关于何时或是否调用 JQuery 或 CSS 文件的原因不符。
有时我看到当“personal.html”在加载 HTML 版本的转换过程中加载时，我可以看到纯文本，但随后文档调用 JQuery 和 CSS 并快速转换为格式。我想知道这是否是主要问题？将内容从加载延迟到调用页面格式并运行脚本可以解决问题。如果是这样，我将如何实现该解决方案？
我已经包含了我正在引用的 Responsive Tab JQuery 文档。如果需要更多代码或资源，请告诉我，我会添加它们。 personal.html 也包括在内。
我自己的 JQuery 脚本:
$(".home_button").live('click', function() {
$("#content_container").load("./index.html #drill_banner")
$("#info").slideDown(1000, function() {
$("menu").css("border-bottom", "#F93 2px Solid")
})
return false;
});
$(".personal_info").live('click', function() {
$("#content_container" ).load("personal/personal.html")
$("#info").slideUp(1000, function() {
$("menu").css("border-bottom", "#F93 0px Solid")
})
return false;
});
个人.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="../css/responsive_tabs.css">
<link rel="stylesheet" type="text/css" href="../css/style.css">
</head>
<body>
<div class="responsive-tabs">
<h2>Personal Technology Services</h2>
<h2>On-Site</h2>
<div>This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text.
</div>
<h2>In-Shop</h2>
<div>
Content for Tab 3
</div>
<h2>
Remote Service</h2>
<div>
Content for Tab 3
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js">
</script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js">
</script>
<script type="text/javascript" src="../js/responsive_tabs.js">
</script>
<script type="text/javascript" src="../js/script.js">
</script>
<script>
$(function() {
RESPONSIVEUI.responsiveTabs();
})
</script>
</body>
</html>
响应式标签 JQuery
/* ----------------
ResponsiveTabs.js
Author: Pete Love | www.petelove.com
Version: 1.10
------------------- */
var RESPONSIVEUI = {};
(function($) {
RESPONSIVEUI.responsiveTabs = function () {
var $tabSets = $('.responsive-tabs');
if (!$tabSets.hasClass('responsive-tabs--enabled')) {
// if we haven't already called this function and enabled tabs
$tabSets.addClass('responsive-tabs--enabled');
//loop through all sets of tabs on the page
var tablistcount = 1;
$tabSets.each(function() {
var $tabs = $(this);
// add tab heading and tab panel classes
$tabs.children(':header').addClass('responsive-tabs__heading');
$tabs.children('div').addClass('responsive-tabs__panel');
// determine if markup already identifies the active tab panel for this set of tabs
// if not then set first heading and tab to be the active one
var $activePanel = $tabs.find('.responsive-tabs__panel--active');
if(!$activePanel.length) {
$activePanel = $tabs.find('.responsivetabs__panel').first().addClass('responsive-tabs__panel--active');
}
$tabs.find('.responsive-tabs__panel').not('.responsive-tabs__panel--active').hide().attr('aria-hidden','true');
//hide all except active panel
$activePanel.attr('aria-hidden', 'false');
/* make active tab panel hidden for mobile */
$activePanel.addClass('responsive-tabs__panel--closed-accordion-only');
// wrap tabs in container - to be dynamically resized to help prevent page jump
var $tabsWrapper = $('<div/>', {'class': 'responsive-tabs-wrapper' });
$tabs.wrap($tabsWrapper);
var highestHeight = 0;
// determine height of tallest tab panel. Used later to prevent page jump when tabs are clicked
$tabs.find('.responsive-tabs__panel').each(function() {
var tabHeight = $(this).height();
if (tabHeight > highestHeight) {
highestHeight = tabHeight;
}
});
//create the tab list
var $tabList = $('<ul/>', { 'class': 'responsive-tabs__list', 'role': 'tablist' });
//loop through each heading in set
var tabcount = 1;
$tabs.find('.responsive-tabs__heading').each(function() {
var $tabHeading = $(this);
var $tabPanel = $(this).next();
$tabHeading.attr('tabindex', 0);
// CREATE TAB ITEMS (VISIBLE ON DESKTOP)
//create tab list item from heading
//associate tab list item with tab panel
var $tabListItem = $('<li/>', {
'class': 'responsive-tabs__list__item',
id: 'tablist' + tablistcount + '-tab' + tabcount,
'aria-controls': 'tablist' + tablistcount +'-panel' + tabcount,
'role': 'tab',
tabindex: 0,
text: $tabHeading.text(),
keydown: function (objEvent) {
if (objEvent.keyCode === 13) { // if user presses 'enter'
$tabListItem.click();
}
},
click: function() {
//Show associated panel
//set height of tab container to highest panel height to avoid page jump
$tabsWrapper.css('height', highestHeight);
// remove hidden mobile class from any other panel as we'll want that panel to be open at mobile size
$tabs.find('.responsive-tabs__panel--closed-accordion-only').removeClass('responsive-tabs__panel--closed-accordion-only');
// close current panel and remove active state from its (hidden on desktop) heading
$tabs.find('.responsive-tabs__panel--active').toggle().removeClass('responsive-tabs__panel--active').attr('aria-hidden','true').prev().removeClass('responsive-tabs__heading--active');
//make this tab panel active
$tabPanel.toggle().addClass('responsive-tabs__panel--active').attr('aria-hidden','false');
//make the hidden heading active
$tabHeading.addClass('responsive-tabs__heading--active');
//remove active state from currently active tab list item
$tabList.find('.responsive-tabs__list__item--active').removeClass('responsive-tabs__list__item--active');
//make this tab active
$tabListItem.addClass('responsive-tabs__list__item--active');
//reset height of tab panels to auto
$tabsWrapper.css('height', 'auto');
}
});
//associate tab panel with tab list item
$tabPanel.attr({
'role': 'tabpanel',
'aria-labelledby': $tabListItem.attr('id'),
id: 'tablist' + tablistcount + '-panel' + tabcount
});
// if this is the active panel then make it the active tab item
if($tabPanel.hasClass('responsive-tabs__panel--active')) {
$tabListItem.addClass('responsive-tabs__list__item--active');
}
// add tab item
$tabList.append($tabListItem);
// TAB HEADINGS (VISIBLE ON MOBILE)
// if user presses 'enter' on tab heading trigger the click event
$tabHeading.keydown(function(objEvent) {
if (objEvent.keyCode === 13) {
$tabHeading.click();
}
});
//toggle tab panel if click heading (on mobile)
$tabHeading.click(function() {
// remove any hidden mobile class
$tabs.find('.responsive-tabs__panel--closed-accordion-only').removeClass('responsive-tabs__panel--closed-accordion-only');
// if this isn't currently active
if (!$tabHeading.hasClass('responsive-tabs__heading--active')){
var oldActivePos,
$activeHeading = $tabs.find('.responsive-tabs__heading--active');
// if there is an active heading, get its position
if($activeHeading.length) {
oldActivePos = $activeHeading.offset().top;
}
// close currently active panel and remove active state from any hidden heading
$tabs.find('.responsive-tabs__panel--active').slideToggle().removeClass('responsive-tabs__panel--active').prev().removeClass('responsive-tabs__heading--active');
//close all tabs
$tabs.find('.responsive-tabs__panel').hide().attr('aria-hidden','true');
//open this panel
$tabPanel.slideToggle().addClass('responsive-tabs__panel--active').attr('aria-hidden','false');
// make this heading active
$tabHeading.addClass('responsive-tabs__heading--active');
var $currentActive = $tabs.find('.responsive-tabs__list__item--active');
//set the active tab list item (for desktop)
$currentActive.removeClass('responsive-tabs__list__item--active');
var panelId = $tabPanel.attr('id');
var tabId = panelId.replace('panel','tab');
$('#' + tabId).addClass('responsive-tabs__list__item--active');
//scroll to active heading only if it is below previous one
var tabsPos = $tabs.offset().top;
var newActivePos = ($tabHeading.offset().top) - 15;
if(oldActivePos < newActivePos) {
$('html, body').animate({ scrollTop: tabsPos }, 0).animate({ scrollTop: newActivePos }, 400);
}
}
// if this tab panel is already active
else {
// hide panel but give it special responsive-tabs__panel--closed-accordion-only class so that it can be visible at desktop size
$tabPanel.removeClass('responsive-tabs__panel--active').slideToggle(function () { $(this).addClass('responsive-tabs__panel--closed-accordion-only'); });
//remove active heading class
$tabHeading.removeClass('responsive-tabs__heading--active');
//don't alter classes on tabs as we want it active if put back to desktop size
}
});
tabcount ++;
});
// add finished tab list to its container
$tabs.prepend($tabList);
// next set of tabs on page
tablistcount ++;
});
}
};
})(jQuery);
谢谢你的时间
最佳答案
看起来您需要允许监听 load() 完成。例如在这个片段中:
$("#content_container").load("./index.html #drill_banner", function() {
$("#info").stop().slideDown(1000, function() {
$("menu").css("border-bottom", "#F93 2px Solid");
});
});
试试看效果如何
关于javascript - Jquery 和 CSS 加载不可靠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22880513/