View on GitHub

Noo.js Tabs

Takes the basic nav and adds the .nav-tabs class to generate a tabbed interface. Use them to create tabbable regions (in .noojs-tabs) without any javascript. This works by toggling an invisible radiobutton group and is supported by all browsers.

Tab1

hsadfasdf.
Tab2

asfd hsadfsasdf.
This is tab3 
<!-- Important: these need to be ordered mirrored to the order of the tabs  -->
<input class="noojs-button" type="radio" id="tab1open3" name="tab1group">
<input class="noojs-button" type="radio" id="tab1open2" name="tab1group">
<input class="noojs-button" type="radio" id="tab1open1" name="tab1group" checked>
<ul class="nav nav-tabs">
    <label for="tab1open1" class="nav-link">
        <li class="nav-item">
            Tab1
        </li>
    </label>
    <label for="tab1open2" class="nav-link">
        <li class="nav-item">
       Tab2
        </li>
    </label>
    <label for="tab1open3" class="nav-link">
        <li class="nav-item">
            Tab3
        </li>
    </label>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </li>
</ul>
<div class="noojs-tabs">
    <div class="noojs-tab">
        Tab1 <br><br> hsadfasdf.
    </div>
    <div class="noojs-tab">
        Tab2 <br><br>asfd hsadfsasdf.
    </div>
    <div class="noojs-tab">
        This is tab3
    </div>
</div>