

- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create tab headers with CSS and JavaScript?
To create tab headers with CSS and JavaScript, the code is as follows −
Example
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .tablink { background-color: black; color: white; float: left; cursor: pointer; padding: 20px 12px; font-size: 15px; width: 33.3%; } .tablink:hover { background-color: black; } .tabcontent { color: white; display: none; padding: 50px; text-align: center; } #date { background-color:blue; border: 1px solid black; } #time { background-color:yellow; color: black; border: 1px solid black; } #venue { background-color:orange; border: 1px solid black; } </style> </head> <body> <h2>Match Schedule</h2> <div id="date" class="tabcontent"> <h1>Date</h1> <p>Match will held on 2nd April.</p> </div> <div id="time" class="tabcontent"> <h1>Time</h1> <p>Begins: 9AM</p> </div> <div id="venue" class="tabcontent"> <h1>Venue</h1> <p>MCG, Australia</p> </div> <button class="tablink" onclick="demo('date', this, 'red')" id="defaultOpen">Date</button> <button class="tablink" onclick="demo('time', this, 'green')">Time</button> <button class="tablink" onclick="demo('venue', this, 'blue')">Venue</button> <script> function demo(match,e,color) { var i, content, links; content = document.getElementsByClassName("tabcontent"); var len1 = content.length; for (i = 0; i < len1; i++) { content[i].style.display = "none"; } links = document.getElementsByClassName("tablink"); var len2 = links.length; for (i = 0; i < len2; i++) { links[i].style.backgroundColor = ""; } document.getElementById(match).style.display = "block"; e.style.backgroundColor = color; } document.getElementById("defaultOpen").click(); </script> </body> </html>
Output
This will produce the following output −
Now, click on any of the tabs −
- Related Questions & Answers
- How to create a vertical tab menu with CSS and JavaScript?
- How to create tabs with CSS and JavaScript?
- How to create popups with CSS and JavaScript?
- How to create an Accordion with CSS and JavaScript?
- How to create full-page tabs with CSS and JavaScript?
- How to create a quotes slideshow with CSS and JavaScript?
- How to create an expanding grid with CSS and JavaScript?
- How to create a responsive slideshow with CSS and JavaScript?
- How to create responsive Modal Images with CSS and JavaScript?
- How to create custom select boxes with CSS and JavaScript?
- How to create a Modal Box with CSS and JavaScript?
- How to create a scroll indicator with CSS and JavaScript?
- How to create custom range sliders with CSS and JavaScript?
- How to create a collapsible section with CSS and JavaScript?
- How to create a snackbar / toast with CSS and JavaScript?
Advertisements