Tabbed Interface

🎯 Overview

This tabbed interface is built entirely with HTML and CSS—no JavaScript required! It uses the powerful :target pseudo-class to show and hide content based on the URL hash.

Key Features

• ✨ Pure CSS - no JavaScript needed
• 🔗 URL-based navigation (bookmark-friendly)
• ⌨️ Keyboard accessible
• 📱 Fully responsive
• 🎨 Smooth animations
• ♿ Screen reader friendly

Browser Support

The :target pseudo-class is supported in all modern browsers, including Chrome, Firefox, Safari, Edge, and even Internet Explorer 9+.

⚙️ How It Works

The magic happens through a combination of hash links and the :target pseudo-class. Here's the breakdown:

1. Hash Links

Each tab link points to a hash (fragment identifier) in the URL:

<a href="#overview">Overview</a>
<a href="#how-it-works">How It Works</a>

2. Tab Panels with IDs

Each content panel has an id matching the hash:

<div id="overview" class="tab-panel">
    Content here...
</div>

3. The :target Selector

CSS uses :target to show the panel that matches the current URL hash:

.tab-panel {
    display: none;  /* Hide all panels by default */
}

.tab-panel:target {
    display: block;  /* Show the targeted panel */
    animation: fadeIn 0.4s ease;
}

4. Default Tab

To show a default tab when no hash is present, we use:

.tab-panel:first-of-type {
    display: block;  /* Show first tab by default */
}

📝 Code Examples

Basic HTML Structure

<div class="tabs">
    <nav class="tab-nav">
        <a href="#tab1" class="tab-link">Tab 1</a>
        <a href="#tab2" class="tab-link">Tab 2</a>
    </nav>

    <div id="tab1" class="tab-panel">
        Tab 1 content
    </div>
    <div id="tab2" class="tab-panel">
        Tab 2 content
    </div>
</div>

Essential CSS

/* Hide all panels by default */
.tab-panel {
    display: none;
}

/* Show targeted panel */
.tab-panel:target {
    display: block;
}

/* Show first panel if no target */
.tab-panel:first-of-type {
    display: block;
}

/* Hide first panel when another is targeted */
.tab-panel:target ~ .tab-panel:first-of-type {
    display: none;
}

Adding Animations

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tab-panel:target {
    animation: fadeIn 0.4s ease;
}

🎨 Customization Guide

Colors

All colors are defined using CSS custom properties in the :root selector. Find them at the top of the CSS (around line 70-85):

• --color-primary - Main accent color
• --color-tab-active - Active tab background
• --color-tab-inactive - Inactive tab background
• --color-border - Border colors

Adding New Tabs

1. Add a new link to .tab-nav:

   <a href="#newtab" class="tab-link">New Tab</a>

2. Add a new panel with matching ID:

   <div id="newtab" class="tab-panel">
       Your content here
   </div>

Animation Options

Try different animations by changing the keyframes:

• Slide In: Change translateY to translateX
• Scale: Add transform: scale(0.95) in the from state
• Faster/Slower: Adjust the duration (e.g., 0.2s or 0.6s)

Accessibility Tips

• Use semantic HTML (<nav>, proper headings)
• Ensure sufficient color contrast
• Maintain focus indicators for keyboard navigation
• Use descriptive link text