JavaScript Program to Create a Tab Menu
Write a JavaScript program to create a tab menu.
Source Code
<html>
<head>
<title>Tab Menu</title>
<style>
.tabs .tab {
float: left;
}
.tabs .tab .content {
position: absolute;
left: 0px;
width: 60%;
border: 1px black solid;
}
.checkboxtab {
display: none;
}
.tab label {
margin-right: 10px;
}
.checkboxtab:checked ~ label {
color: purple;
border: 1px black solid;
}
.checkboxtab:checked ~ .content {
z-index: 1;
}
span {
background-color: white;
}
</style>
</head>
<body>
<h2>Tab Menu Example</h2>
<div class="tabs">
<div class="tab">
<input type="radio" name="checkbox-group" id="cb1" class="checkboxtab" checked>
<label for="cb1">Tab 1</label>
<div class="content">
<span style="color:red;">This is the content of tab 1</span>
</div>
</div>
<div class="tab">
<input type="radio" name="checkbox-group" id="cb2" class="checkboxtab">
<label for="cb2">Tab 2</label>
<div class="content">
<span style="color:green;">This is the content of tab 2</span>
</div>
</div>
<div class="tab">
<input type="radio" name="checkbox-group" id="cb3" class="checkboxtab">
<label for="cb3">Tab 3</label>
<div class="content">
<span style="color:blue;">This is the content of tab 3</span>
</div>
</div>
</div>
</body>
</html>
Output
