How to create tabs containing different content in HTML ?
Tabs are used to navigate and display different content around the website. We use tabs to manage space and to make the website more attractive.
- In the body tag create some tabs under the div tag with a Custom-Data-Attribute that holds the id of the content.
- Create another div tag to store the content of the tab with a specific id.
- Specify data attributes for each content tag to display only one tab content at a time.
In this article, we have created three tabs Tab-1, Tab-2 and Tab-3. When we click on any specific tab it will display the content of that tab.
Example: In this example, we will create tabs containing different content.
Output:When we click on Tab-1 it is showing the content of Tab-1 same with Tab-2 and Tab-3.