html / javascript選項卡控制器不起作用

Question

我目前正在為我正在研究的項目確定一個簡單的網站。 我有兩個選項卡控件。 一個在頁面的右側，一個在左側。 兩者都有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>

Answer 1

在chart3.invalidateSize();處引發異常chart3.invalidateSize(); 。 該異常阻止switch_tabs2（）被調用。

Uncaught ReferenceError: chart3 is not defined 

您可以使用瀏覽器的開發工具來查看是否遇到異常：

• Chrome瀏覽器： https ： //developers.google.com/chrome-developer-tools/docs/javascript-debugging
• Firefox： http ： //getfirebug.com/javascript
• Internet瀏覽器： http : //msdn.microsoft.com/zh-cn/library/ie/gg699336( v= vs.85).aspx

希望有幫助！