我正在开发一个网站,该网站可以解析rss供稿并根据类别显示它们。您可以在这里查看:http://vitaminjdesign.com/adrian
我正在使用标签显示每个类别。这些选项卡使用ajax在单击它们时显示一组新的提要。
我还使用了另外两个脚本-一个称为equalheights的脚本,该脚本将所有高度调整为最高项目的高度。我正在使用的另一个脚本称为smart columns,它基本上会调整列的大小,以便始终填充屏幕。
我遇到的第一个问题是单击新选项卡(以显示该类别中的提要)。单击新选项卡时,控制台显示jQuery错误:
$(".block").equalHeights is not a function
[Break On This Error] $(".block").equalHeights();
主要问题是,即使该类别中有多个供稿箱,每个供稿箱也会填满整个屏幕的宽度(单击选项卡后)。
我的主意-尽管所有提要(跨所有选项卡)都加载到了页面加载中,但是当选择一个新选项卡时,两个jQuery脚本都需要再次运行。关于如何使它正常工作的任何想法?
需要注意的一件事-我使用ajaxSuccess方法在第一页上使equalHeights起作用...但是单击选项卡后它将无法起作用。
标签的我的jQuery代码如下:
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
$("#cities li:nth-child(1)").addClass('zebra');
$("#column li ul li:nth-child(6)").addClass('zebra1');
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
$(".block").equalHeights();
return false;
});
多亏了Macy(请参见下面的答案),我将jQuery脚本带到了下面:(仍然无法使用)
$(document).ajaxSuccess(function(){
var script = document.createElement('script');
script.src = 'js/equalHeight.js';
document.body.appendChild(script);
equalHeight($(".block"));
最佳答案
我在您的代码中发现了一些小问题。我不确定我的建议能否解决所有问题,但是我决定在此描述我的第一个结果。
1)您应在'}'之前删除逗号。当前呼叫看起来像$("#column").sortable({/**/,});
2)函数equalHeight
不是jQuery插件。这就是为什么'click'事件处理程序内的调用$(".block").equalHeights();
遵循错误“ $(“。block”)。equalHeights不是您所描述的函数”的原因。您应该将代码的位置更改为equalHeight($(".block"));
,就像在其他位置使用它一样。
3)脚本http://vitaminjdesign.com/adrian/js/equalHeight.js仅定义函数equalHeight
,而不启动任何操作。加载后,它会保留在页面上。因此,您不应在每个ajax请求结束时加载它。所以我建议减少脚本
$(document).ajaxSuccess(function(){
var script = document.createElement('script');
script.src = 'http://vitaminjdesign.com/adrian/js/equalHeight.js';
document.body.appendChild(script);
equalHeight($(".block"));
$("a[href^='http:']:not([href*='" + window.location.host + "'])").each(function() {
$(this).attr("target", "_blank");
});
});
至
$(document).ajaxSuccess(function(){
equalHeight($(".block"));
$("a[href^='http:']:not([href*='" + window.location.host + "'])").each(function() {
$(this).attr("target", "_blank");
});
});
4)我建议将http://vitaminjdesign.com/adrian/js/equalHeight.js的代码从
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
至
function equalHeight(group) {
var tallest = 0;
group.each(function() {
var thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
消除使用全局变量
tallest
和thisHeight
。我建议您使用JSLint来验证所有JavaScript代码。我觉得这很有帮助。5)我建议您使用任何XHTML验证器在标记中找到一些小但有时非常重要的错误。例如,尝试使用this来查看一些错误。您越遵循XHTML标准,在不同的Web浏览器中获得相同页面结果的可能性就越大。顺便说一句,如果页面中包含的脚本采用以下格式,则可以大大减少当前代码中的错误数量
<script type="text/javascript">
//<![CDATA[
/* here is the JavaScript code */
//]]>
</script>
我没有分析完整的代码,但希望我的建议至少可以解决您在问题中描述的一些问题。