<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>tabtest</title>
<style>
* {
transition: all 0.5s ease;
}
.tab {
display: none;
padding: 20px;
background-color: lightgray;
}
.tab-button {
display: inline-block;
background-color: darkgray;
cursor: pointer;
padding: 5px;
}
.tab-button:hover {
background-color: darkgray;
}
</style>
</head>
<body>
<div class=tab-button onclick="selectTab(0);">tab1</div>
<div class=tab-button onclick="selectTab(1);">tab2</div>
<div id="tab1" class="tab">
hello1
</div>
<div id="tab2" class="tab">
hello2
</div>
<script>
function selectTab(index) {
var tabs = document.getElementsByClassName("tab");
for (var i = 0; i < tabs.length; i++) {
tabs[i].style.display = "none";
}
tabs[index].style.display = "block";
var buttons = document.getElementsByClassName("tab-button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].style["background-color"] = "darkgray";
}
buttons[index].style["background-color"] = "lightgray";
}
selectTab(0);
</script>
</body>
</html>