Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

tabs
html
css
javascript

How to create tabs in HTML

Educative Answers Team

All web applications have some method of allowing the user to navigate to different sections of the application. Tabs are commonly used to achieve this.

svg viewer

Code

The following code snippet uses HTML, JavaScript, and CSS to create tabs:

Explanation

  • Lines 6-10 create the three buttons that act as tabs. All of them have an onClick handler associated with them.
  • Lines 12-22 create the content to be displayed once the tabs are clicked.
  • Lines 24-44 contain the JavaScript code for the clickHandle function, which is invoked when a tab button is clicked. The function sets the clicked tab to be ​active and displays its corresponding content.

RELATED TAGS

tabs
html
css
javascript
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring