Pure CSS Semantic UI Basic Tabs

CSS only toggle Semantic UI basic tab. No JavaScript required. Click the following tabs to see the demo.

The basic technique is the same as pure CSS toggle HTML element [1]. We need:

1 - Visible HTML label elements, which is the navigation tabs.

2 - Invisible HTML input radio elements, referenced by the label elements. The value of name attribute of these elements must be the same.

3 - Tab contents, invisible in the beginning.

When users click on the visible label elements, the corresponding input radio element is checked. We use CSS3 :checked selector to select corresponding tab content, and make the selected tab content visible.

The complete source code is as follows:

HTML:

<!-- you can put the following line in your html head -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.0/dist/semantic.min.css">

<input type="radio" id="tab1" name="tab-select">
<input type="radio" id="tab2" name="tab-select">
<input type="radio" id="tab3" name="tab-select">
<div class="ui top attached tabular menu">
  <a class="item"><label for="tab1">First</label></a>
  <a class="item"><label for="tab2">Second</label></a>
  <a class="item"><label for="tab3">Third</label></a>
</div>
<div class="ui bottom attached tab segment tab1">
  First
</div>
<div class="ui bottom attached tab segment tab2">
  Second
</div>
<div class="ui bottom attached tab segment tab3">
  Third
</div>

CSS:

input[name="tab-select"] {
  display: none;
}

/* the magic */
#tab1:checked ~ .ui.tab.segment.tab1,
#tab2:checked ~ .ui.tab.segment.tab2,
#tab3:checked ~ .ui.tab.segment.tab3 {
  display: block;
}

• The first rule hides the input radio box.
• The magic is in second rule. We use :checked and general sibling selector (~) to make the user-selected tab content visible.

If you want to use Vue.js to implement the above Semantic UI basic tabs, see [4].

Tested on:

• Chromium 69.0.3497.81 on Ubuntu 18.04 (64-bit)
• Semantic UI 2.4.0

References: