Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- 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 tabs with CSS and JavaScript?
In this article, we are going to discuss how to create tabs with CSS and JavaScript.
Tabs are containers whose main purpose is to show and navigate through the diverse content of the website. Tabs are commonly used to manage the space and make the website more user-friendly without reloading too many times. The content in these tabs are usually closely related but mutually exclusive.
There are several types of tabs which can be created and used in various cases −
Horizontal tabs
Horizontal with Secondary Tabs
Frameless Horizontal Tabs
Vertical Tabs
Vertical Tabs with Second Tabs
Steps to Create Tabs
Following are the steps to be followed to create tabs with CSS and JavaScript −
In the body, the tag creates the tab under the div tag which custom data attributes.
Create another div tag to store the content of the tab with the specified id.
Specified data attributes for each content tag to display only one tab of content at a time
Using JavaScript, we can display the content of the tab.
Example.html
In the HTML script, we are building the page's body structure by constructing three div buttons (Tab1, Tab2, and Tab3) and three div paragraphs, as you can see from the code below
<!-- HTML Of the Tab --> <div id="tab1" onClick="JavaScript:selectTab(1);">Tab 1</div> <div id="tab2" onClick="JavaScript:selectTab(2);">Tab 2</div> <div id="tab3" onClick="JavaScript:selectTab(3);">Tab 3</div> <br /> <div id="tab1Content">This is first tab.</div> <div id="tab2Content">This is Second tab</div> <div id="tab3Content">This is third tab</div>
Example.css
Using CSS, Style is being added to the page. Styling the width and height of the page, as well as creating a hover effect and altering the background color of the button when you hover over it.
<!-- style of the tab-->
<style>
#tab1,
#tab2,
#tab3 {
text-align: center;
float: left;
padding: 5px 10px 5px 10px;
background: #b00098;
color: #ffffff;
margin: 0px 5px 0px 5px;
cursor: pointer;
border-radius: 5px;
}
#tab1:hover,
#tab2:hover,
#tab3:hover {
background: #ecade4;
}
#tab1Content,
#tab2Content,
#tab3Content {
width: auto;
height: 100px;
padding: 20px;
border: 1px solid #b00098;
border-radius: 10px;
}
#tab1Content,
#tab2Content,
#tab3Content {
display: none;
}
</style>
Example.js
Using JavaScript, we are constructing a function selectTab and passing tabindex as an argument, as well as adding the style display attribute, so that when you click on the button, the tab content appears on the page. Let us see that in the code below.
<!-- Javascript Code of the tab -->
<script>
function selectTab(tabIndex) {
//Hide All Tabs
document.getElementById("tab1Content").style.display = "none";
document.getElementById("tab2Content").style.display = "none";
document.getElementById("tab3Content").style.display = "none";
//Show the Selected Tab
document.getElementById("tab" + tabIndex + "Content").style.display =
"block";
}
</script>
Complete Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tab using javascript</title>
<!-- style of the tab-->
<style>
#tab1,
#tab2,
#tab3 {
text-align: center;
float: left;
padding: 5px 10px 5px 10px;
background: #b00098;
color: #ffffff;
margin: 0px 5px 0px 5px;
cursor: pointer;
border-radius: 5px;
}
#tab1:hover,
#tab2:hover,
#tab3:hover {
background: #ecade4;
}
#tab1Content,
#tab2Content,
#tab3Content {
width: auto;
height: 100px;
padding: 20px;
border: 1px solid #b00098;
border-radius: 10px;
}
#tab1Content,
#tab2Content,
#tab3Content {
display: none;
}
</style>
</head>
<body>
<!-- HTML Of the Tab -->
<div id="tab1" onClick="JavaScript:selectTab(1);">Tab 1</div>
<div id="tab2" onClick="JavaScript:selectTab(2);">Tab 2</div>
<div id="tab3" onClick="JavaScript:selectTab(3);">Tab 3</div>
<br />
<div id="tab1Content">This is first tab.</div>
<div id="tab2Content">This is Second tab</div>
<div id="tab3Content">This is third tab</div>
<!-- Javascript Code of the tab -->
<script>
function selectTab(tabIndex) {
//Hide All Tabs
document.getElementById("tab1Content").style.display = "none";
document.getElementById("tab2Content").style.display = "none";
document.getElementById("tab3Content").style.display = "none";
//Show the Selected Tab
document.getElementById("tab" + tabIndex + "Content").style.display =
"block";
}
</script>
</body>
</html>
5K+ Views
