html/javascript选项卡控制器不工作

我目前正在完成一个简单的项目，我的工作网站。我有两个选项卡控件。一个在页面的右侧，一个在左侧。两者都有3个选项卡，单击时显示不同的内容。我不久前创建了一个，它工作得非常好，我最近回来并尝试添加第二个。问题是，当页面加载时，第一个页面起作用，但第二个页面加载时，页面下方显示所有三个内容区域。奇怪的是，一旦我单击第二个控制器上的一个选项卡，就会只显示该选项卡，整个控件似乎与另一个一样正常工作

我肯定我犯了一个愚蠢的错误，但我就是找不到它。任何帮助都将不胜感激

我的代码如下：

<div id="graphWrapper">
        <ul class="tabs">
            <li><a href="#" class="defaulttab" rel="tabs1">Daily</a></li>
            <li><a href="#" rel="tabs2">Gender</a></li>
            <li><a href="#" rel="tabs3">Age</a></li>
        </ul>

    <div class="tab-content" id="tabs1">Graph Content 1</div>
    <div class="tab-content" id="tabs2">Graph Content 2</div>
    <div class="tab-content" id="tabs3">Graph Content 3</div>
    </div>

<div id="reportWrapper">
        <ul class="tabs2">
            <li><a href="#" class="defaulttab2" rel2="tabsR1">Report 1</a></li>
            <li><a href="#" rel2="tabsR2">Report 2</a></li>
            <li><a href="#" rel2="tabsR3">Report 3</a></li>
        </ul>

    <div class="tab-content2" id="tabsR1">Report Content 1</div>
    <div class="tab-content2" id="tabsR2">Report Content 2</div>
    <div class="tab-content2" id="tabsR3">Report Content 3</div>
    </div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>

    <script>

        $(document).ready(function() {


            $('.tabs2 a').click(function(){
                switch_tabs2($(this));
            });

            switch_tabs($('.defaulttab'));
            switch_tabs2($('.defaulttab2'));

    });

        function switch_tabs(obj)
        {
        $('.tab-content').hide();
        $('.tabs a').removeClass("selected");
        var id = obj.attr("rel");

        $('#'+id).show();
        obj.addClass("selected");
        chart3.invalidateSize();
        chart4.invalidateSize();
        chart5.invalidateSize();
        }

        function switch_tabs2(obj2)
        {
        $('.tab-content2').hide();
        $('.tabs2 a').removeClass("selected2");
        var id2 = obj2.attr("rel2");

        $('#'+id2).show();
        obj2.addClass("selected2");

        }


    </script>

图表内容1
图表内容2
图表内容3





报告内容1
报告内容2
报告内容3
$（文档）.ready（函数（）{
$（'.tabs2 a'）。单击（函数（）{
开关_tabs2（$（此））；
});
切换选项卡（$（'.defaulttab'））；
开关_tabs2（$（'.defaulttab2'））；
});
功能开关_选项卡（obj）
{
$（'.tab内容'）.hide（）；
$（'.tabs a'）.removeClass（“选定”）；
变量id=对象属性（“相对”）；
$（'#'+id）.show（）；
对象添加类（“选定”）；
图3.invalidateSize（）；
图4.invalidateSize（）；
图5.invalidateSize（）；
}
功能开关_tabs2（obj2）
{
$（'.tab-content2'）.hide（）；
$（'.tabs2 a'）.removeClass（“selected2”）；
var id2=obj2.attr（“rel2”）；
$（'#'+id2）.show（）；
obj2.addClass（“selected2”）；
}

在

图表3.invalidateSize（）中引发异常。此异常阻止调用开关_tabs2（）

Uncaught ReferenceError: chart3 is not defined 

您可以看到，使用浏览器的开发工具时遇到异常：


铬：
火狐：
Internet explorer：

希望有帮助
 请添加一个jsfiddle删除.invalidateSize（）；你知道我如何用另一种方式使图表大小无效吗？为什么这会影响到另一个控制器？感谢一旦遇到异常，javascript就会结束当前的执行线程。这意味着在运行
chart3.invalidateSize（）
调用之后根本没有代码，这意味着永远不会调用switch_tabs2（）。关于invalidateSize（），我不知道您在那里想要实现什么。示例中的DOM元素将自动调整大小以适应其内容。也许您正在使用某种具有invalidateSize（）调用的图表库？无论如何，
chart3
在您的示例中从未定义过，因此在没有首先定义它的情况下，您将无法调用它的任何内容。所有这些都已修复！非常感谢你的帮助。我确实在使用amcharts从sql数据库生成图形。。。我错误地阅读了有关invalidateSize（）的文档，现在已将其移动到正确的位置。一切都很好，再次感谢！很高兴我能帮忙：-）