In this Article We will Share How to Create tabs in HTML Without Javascript This tabs make in pure HTML CSS. So, Today's Project is too Fantastic.
When we have to show different content in different subject, that too in the same web pages, then the best way is to use HTML CSS Tabs. In today's Time, All websites definitely use Tabs somewhere in their web pages. If you are a web developer or Web designer then How are tabs made? This is very important for you to know. And here you will also find the code of HTML Tabs. Which you will be able to use anywhere.
How to Create tabs in HTML Without Javascript
This tabs is make in HTML CSS Tab Without Used Javascript also our tabs in make Without bootstrap Only CSS tabs.
<div class="tabset"> <!-- Tab 1 --> <input type="radio" name="tabset" id="tab1" aria-controls="first" checked> <label for="tab1">First</label> <!-- Tab 2 --> <input type="radio" name="tabset" id="tab2" aria-controls="second"> <label for="tab2">Second</label> <!-- Tab 3 --> <input type="radio" name="tabset" id="tab3" aria-controls="third"> <label for="tab3">Third</label> <div class="tab-panels"> <section id="First" class="tab-panel"> <h2>First</h2> <p> This is First Tab Here</p> </section> <section id="second" class="tab-panel"> <h2>Second</h2> <p> This is Second Tab. </p> </section> <section id="third" class="tab-panel"> <h2>Third</h2> <p>This is Third Tab.</p> </section> </div> </div>
<style type="text/css"> /* CSS for the main interaction */ .tabset > input[type="radio"] { position: absolute; left: -200vw; } .tabset .tab-panel { display: none; } .tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child, .tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2), .tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3), .tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4), .tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5), .tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6)
{ display: block; } body { } .tabset > label { display: inline-block; padding: 10px 15px 10px; border: 1px solid transparent; border-bottom: 0; cursor: pointer; font-weight: 600; background-image: linear-gradient(0deg, rgb(0 0 0 / 16%)
0%,rgba(254.97773319482803, 255,
254.96976882219315, 0.30000001192092896) 100%); border-radius: 15px; } .tabset > label::after { content: ""; position: absolute; left: 15px; bottom: 10px; width: 22px; height: 4px; background: #8d8d8d; } .tabset > label:hover, .tabset > input:focus + label { color: #06c; } .tabset > label:hover::after, .tabset > input:focus + label::after, .tabset > input:checked + label::after { background: #06c; } .tabset > input:checked + label { border-color: #ff00d4; margin-bottom: -1px; color: red; background-color: blue; border-radius: 15px; } .tab-panel { padding: 30px 0; border-top: 1px solid #ccc; } /* Demo purposes only */ *, *:before, *:after { box-sizing: border-box; } body { padding: 30px; } .tabset { max-width: 65em; } </style>