我正在开发一个网站,该网站可以解析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);
}


消除使用全局变量tallestthisHeight。我建议您使用JSLint来验证所有JavaScript代码。我觉得这很有帮助。

5)我建议您使用任何XHTML验证器在标记中找到一些小但有时非常重要的错误。例如,尝试使用this来查看一些错误。您越遵循XHTML标准,在不同的Web浏览器中获得相同页面结果的可能性就越大。顺便说一句,如果页面中包含的脚本采用以下格式,则可以大大减少当前代码中的错误数量

<script type="text/javascript">
//<![CDATA[
/* here is the JavaScript code */
//]]>
</script>


我没有分析完整的代码,但希望我的建议至少可以解决您在问题中描述的一些问题。

10-06 10:16
查看更多