Member Avatar for harveymendoza@r

I hope there will be a person who can talk to me

  • 3 Contributors
  • 2 Replies
  • 48 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Shanti C

Dani AI

Generated

If you just need simple, CSS-only tabs, you can do it with radio inputs and labels. It works without JS, is keyboard-friendly, and easy to skin. The link list from points to older demos; here is a small, modern starter you can paste in and tweak.

<div class="tabs">
  <input type="radio" name="tabset" id="t1" checked>
  <label for="t1">Tab A</label>
  <input type="radio" name="tabset" id="t2">
  <label for="t2">Tab B</label>

  <div id="p1" class="panel">Content for A...</div>
  <div id="p2" class="panel">Content for B...</div>
</div>

<style>
.tabs { font: 14px/1.4 sans-serif; }
.tabs input[type="radio"] { position: absolute; opacity: 0; }
.tabs label {
  display: inline-block; padding: 0.5rem 1rem; cursor: pointer;
  border-bottom: 2px solid transparent;
}
.tabs input:checked + label {
  border-bottom-color: #06c; font-weight: 600;
}
.panel { display: none; padding: 1rem 0; }
#t1:checked ~ #p1, #t2:checked ~ #p2 { display: block; }
</style>

Notes:

  • This uses the :checked pseudo-class to toggle panels; see MDN for details: CSS :checked.
  • Pure CSS tabs do not provide full ARIA tab behavior (arrow-key navigation, aria-selected, etc.). For production-grade accessibility, follow the WAI-ARIA Tabs pattern and add a tiny bit of JS: WAI-ARIA Tabs pattern.
  • Works in modern browsers. If you must support very old IE, you will need a JS fallback.

Recommended Answers

All 2 Replies

Member Avatar for scru

Try AIM.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.