我想在点击相关按钮时显示一个选项卡。但是我遇到了这个错误:
"Uncaught TypeError: Cannot read property 'style' of undefined
at openTab (script.js:8)
at HTMLButtonElement.onclick (index.html:21)"。
因此,如果您在左侧菜单中点击一个按钮,openTab函数应该打开相应的选项卡。
因此,如果您在左侧菜单中点击一个按钮,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>