JavaScript Program to Create a Tab Menu

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