无法读取未定义的属性 'style'、按钮和选项卡

Question

我想在单击相关按钮时显示一个选项卡。但是我得到了那个错误：

"Uncaught TypeError: 无法读取未定义的属性 'style' 在 openTab (script.js:8) 在 HTMLButtonElement.onclick (index.html:21)"

因此，如果您单击左侧菜单中的一个按钮，函数 openTab 应该会打开关联的选项卡。

function openTab (event, tabName){
    var i, tabcontent, tablinks;

    
    // get all elements with class = 'tabcontent' and hide them    
    tabcontent = document.getElementsByClassName('tabcontent');
    for (i = 0; tabcontent.length; i++){
        tabcontent[i].style.display = 'none';
    }

    // get all elements with class = 'tablinks' and remove the class 'active'
    tablinks = document.getElementsByClassName('tablinks');
    for (i =0; tablinks.length;i++){
        tablinks[i].className = tablinks[i].className.replace('active', '');
    }

    //show the current tab, and add an 'active' class to the button that opened the tab
    document.getElementById(tabName).style.display = 'block';
    evt.currentTarget.className += 'active';

}

body {
    background-color: lightyellow;
    text-align: center;
}

#webseite{
    margin: 0 auto;
    width: 1500px;

}

#header {
    height: 150;
    background-color: wheat;
    border-radius: 10px;
}

#header h1 {
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 60px;
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;
}

#menue {
    float: left;
    width:20% ;
    height: 700px;
    background-color: wheat;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 20px;
    border-radius: 10px;
}

#inhalt{
    float: left;
    width: 78.65%;
    height: 700px;
    background-color: wheat;
    margin-bottom: 10px;
    margin-top: 10px;
    border-radius: 10px;
}

.tablinks{
    font-size: 40px;
    margin-top: 30px;
    margin-bottom: 30px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    background-color: wheat;
    border: none;
    transition: 0.3s;
}

.tablinks:hover{
    transform: scale(1.2);
    background-color: #ddd;
}

.tabcontent{
    display: none;
    padding: 6px 12px;

}

.tabcontent tab_tabelle_vorspeisen{
    display: block;
    background-color: wheat;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Rezepteverwaltung</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
    </head>

    <body>
        <div id="webseite">

            <div id="header">
                <h1>Rezepte</h1>
            </div>

            <div id="main">


                <div id="menue">
                    <table class="tabelle_menue">
                        <button onclick="openTab(event,'tab_tabelle_vorspeisen')" class="tablinks" >Vorspeisen</button>
                        <button onclick="openTab(event,'tab_tabelle_hauptspeisen')" class="tablinks">Hauptgerichte</button>
                        <button onclick="openTab(event,'tab_tabelle_nachspeisen')" class="tablinks" >Nachspeise</button>
                        <button onclick="openTab(event,'tab_tabelle_suppen')" class="tablinks" >Suppen</button>

                    </table>
                </div>


                <div id="inhalt">

                    <div class="tabcontent" id='tab_tabelle_vorspeisen' >
                        <div>Vorspeise</div>
                        <div>Vorspeise</div>
                        <div>Vorspeise</div>
                        <div>Vorspeise</div>
                        <div>Vorspeise</div>
                        <div>Vorspeise</div>
                        <div>Vorspeise</div>


                    </div>
                                
                    <div class="tabcontent" id="tab_tabelle_hauptspeisen" >
                        <div>Hauptspeise</div>
                        <div>Hauptspeise</div>
                        <div>Hauptspeise</div>
                        <div>Hauptspeise</div>
                        <div>Hauptspeise</div>
                        <div>Hauptspeise</div>
                        <div>Hauptspeise</div>


                    </div>
                
                    <div class="tabcontent" id="tab_tabelle_nachspeisen" >
                        <div>Nachspeisen</div>
                        <div>Nachspeisen</div>
                        <div>Nachspeisen</div>
                        <div>Nachspeisen</div>
                        <div>Nachspeisen</div>
                        <div>Nachspeisen</div>



                    </div>

                    <div class="tabcontent" id="tab_tabelle_suppen" >
                        <div>Suppe</div>
                        <div>Suppe</div>
                        <div>Suppe</div>
                        <div>Suppe</div>
                        <div>Suppe</div>
                        <div>Suppe</div>
                        <div>Suppe</div>
                        <div>Suppe</div>



                    </div>
                
                
                
                </div>

            </div>
        </div>
        <script src="script.js"></script>
    </body>
</html>

Answer 1

这些for循环肯定需要限制。我的意思是：

for (i = 0; i < tabcontent.length; i++){
    tabcontent[i].style.display = 'none';
}

对其他循环也做同样的修改。希望对你有帮助。

Answer 2

努力改变
1.
for (i = 0; tabcontent.length; i++)
至
for (i = 0; i < tabcontent.length; i++)
2.
(i =0; tablinks.length;i++)
至
for (i =0; i < tablinks.length; i++)
3.
evt.currentTarget.className += 'active';
至
event.currentTarget.className += 'active';

P.S 提示，看看它在一些流行的框架中是如何实现的，例如 bootstrap ('tabs')

无法读取未定义的属性 'style'、按钮和选项卡

Cannot read property 'style' of undefined, button and tabs

javascript

styles

properties

undefined

无法读取未定义的 属性 'style'、按钮和选项卡

Cannot read property 'style' of undefined, button and tabs

javascript

styles

properties

undefined

无法读取未定义的属性 'style'、按钮和选项卡