How to Create Tab Headers using CSS & JavaScript? Last Updated : 10 May, 2024 Comments Improve Suggest changes Like Article Like Report Tab headers are a commonly used user interface element in web development. They provide a way to organize content into distinct sections, allowing users to switch between them easily. Each tab represents a different category or topic, and clicking on a tab displays the corresponding content while hiding the others. Prerequisites:HTMLCSSJavaScriptSteps to Set up the Project:Create an HTML file with a container for tabs and content.(index.html)Add CSS styles for tab styling.(styles.css)Write JavaScript code to toggle the active tab and display corresponding content.(script.js)Project Structure:Project structure HTML <!DOCTYPE html> <html> <head> <meta name="viewport" HTML="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="navbar"> <img src= "https://media.geeksforgeeks.org/gfg-gg-logo.svg" alt="logo"> </div> <p>Tab header using HTML, CSS and JavaScript</p> <div id="gfg" class="tabHTML"> <h1>gfg</h1> <p>gfg Stands for geeksforgeeks.</p> </div> <div id="HTML" class="tabHTML"> <h1>HTML</h1> <p>HyperText Markup Language (HTML) is a scripting language that defines the structure and content of web pages and applications. .</p> </div> <div id="CSS" class="tabHTML"> <h1>CSS</h1> <p>CSS stands for Cascading Style Sheets, and it's a language used to style HTML documents.</p> </div> <div id="Javascript" class="tabHTML"> <h1>Javascript</h1> <p>JavaScript (JS) is a text-based programming language used both on the client-side and server-side that allows you to make web pages interactive.</p> </div> <button class="tablink" onclick="openCity('gfg', this, 'rgb(49, 39, 39)')" id="defaultOpen">gfg</button> <button class="tablink" onclick="openCity('HTML', this, 'rgb(153, 100, 111)')"> HTML </button> <button class="tablink" onclick="openCity('CSS', this, 'rgb(10, 90, 31)')">CSS</button> <button class="tablink" onclick="openCity('Javascript', this, 'rgb(83, 62, 25)')"> Javascript </button> <script src="script.js"></script> </body> </html> CSS body { font-family: "Lato", sans-serif; } .navbar { overflow: hidden; background-color: #333; display: flex; justify-content: center; align-items: center; } .navbar img { width: 50px; height: auto; padding: 10px 15px; } .tablink { background-color: #555; color: white; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; font-size: 17px; width: 25%; } .tablink:hover { background-color: #777; } /* Style the tab HTML */ .tabHTML { color: white; display: none; padding: 50px; text-align: center; } #gfg { background-color: rgb(49, 39, 39); } #HTML { background-color: rgb(153, 100, 111); } #CSS { background-color: rgb(10, 90, 31); } #Javascript { background-color: rgb(83, 62, 25); } JavaScript //script.js function openCity(cityName, elmnt, color) { let i, tabHTML, tablinks; tabHTML = document.getElementsByClassName("tabHTML"); for (i = 0; i < tabHTML.length; i++) { tabHTML[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablink"); for (i = 0; i < tablinks.length; i++) { tablinks[i].style.backgroundColor = ""; } document.getElementById(cityName).style.display = "block"; elmnt.style.backgroundColor = color; } // Get the element with id="defaultOpen" and click on it document.getElementById("defaultOpen").click(); Output: Comment More infoAdvertise with us Next Article How to Create Tab Headers using CSS & JavaScript? A ayushbhankr3p Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads How to Create Full-Page Tabs using CSS & JavaScript? Tabs are a common UI pattern used to organize content into multiple sections within a single page. In this article, we'll explore how to create full-page tabs using CSS and JavaScript. Full-page tabs allow users to switch between different sections of content while maintaining a clean and intuitive 3 min read How to Create Shrink Header on Scroll using HTML, CSS and JavaScript ? The Shrink Navigation bar works when the user scrolls down the page. In this article, we will use HTML, CSS, and JavaScript to design a shrink navigation bar. HTML is used to create the structure, and CSS is used to set the style of the HTML structure to make it looks good. This kind of shrinking na 3 min read How to Change Tabs on Hover with CSS and JavaScript ? In this article, we are going to learn how can we change tabs on hover, with CSS and JavaScript. Changing tabs on hover enhances the user experience by offering interactive hover navigation. Users can quickly preview different sections without clicking which reduces the time it takes to explore diff 4 min read How to Create Horizontal and Vertical Tabs using JavaScript ? In this article, we will create Horizontal and Vertical Tabs using JavaScript.Tabs can be used for displaying large amounts of content on a single page in an organized manner. We can design single-page tabs using HTML, CSS, and JavaScript. HTML elements are used to design the structure of the tabs a 7 min read How to create Non-Rectangular Header using HTML & CSS ? In this article, we are going to create a Non-Rectangular-header using the basics of HTML and CSS. Approach: Create a header using <header> tag.Create a div for adding the content for the header.Use clip-path() function to give a particular shape to the header. HTML Code: Create an HTML file ( 1 min read How to create a smooth scrolling effect using CSS ? Smooth scrolling is employed on web pages to enhance the user experience by providing a visually appealing and seamless transition between different sections of the page. It improves readability and enhances navigation. Using the CSS property scroll-behaviour we can achieve the smooth scrolling effe 2 min read How to Create Header Cell in a Table using HTML? A header cell in a table made with <th> tag is used to label columns or rows, helping organize information. To create a header cell in an HTML table, use the <th> element. Header cells typically contain titles for each column or row, and they are bold by default.Syntax<th> Contents 1 min read How to create a Landing page using HTML CSS and JavaScript ? A landing page, also referred to as a lead capture page, static page, or destination page, serves a specific purpose and typically appears as a result of online advertising or search engine optimization efforts. Unlike a homepage, a landing page is stripped of distractions and focuses on capturing v 7 min read How to Create a Fixed/Sticky Header on Scroll with CSS and JavaScript? A fixed or sticky header remains at the top of the webpage when the user scrolls down. This functionality enhances navigation and user experience by keeping important links always visible. In this article, we will explore the approach to creating a fixed/sticky header on scroll using CSS and JavaScr 3 min read How to Append Header to a HTML Table in JavaScript ? JavaScript allows us to dynamically modify the structure of a table based on user interaction or other dynamic events. Here we will use JavaScript to dynamically create a Header row and then append it to the HTML table. ApproachIn this approach, we are using create elements along with DOM manipulati 3 min read Like