Programming Exercises

Create a CSS-only tab navigation system.

Hard

Problem Statement

Create a CSS-only tab navigation system.

Sample Output

Clicking on each tab displays its corresponding content while hiding the others.

Limits

Time: 2s · Memory: 256 MB

Code Editor
00:00
<!DOCTYPE html> <html> <head> <style> /* Add CSS here to create the tab navigation system */ </style> </head> <body> <div class="tabs"> <input type="radio" id="tab1" name="tab" checked /> <label for="tab1">Tab 1</label> <div class="content">Content for Tab 1</div> <input type="radio" id="tab2" name="tab" /> <label for="tab2">Tab 2</label> <div class="content">Content for Tab 2</div> <input type="radio" id="tab3" name="tab" /> <label for="tab3">Tab 3</label> <div class="content">Content for Tab 3</div> </div> </body> </html>
Log in or sign up to run or submit your code.Log inSign up
Expected Output
Clicking on each tab displays its corresponding content while hiding the others.