JSFiddle - React, Tailwind, and code Playground

by Sarah Evans

HTML

<div class="tabs">
            <div class="selection">
            <ul class="tab-links">
                <li class="active"><a class="tab-link button" href="#tab1">Button1</a></li>
                <li><a class="tab-link button" href="#tab2">Button 2</a></li>
            </ul>
        </div>	
    <div class="internal-container tab-content">
        

        
        <div id="tab1" class="tab active"> 
            Tab 1 content
            <a href="#tab2" class="tab-link">Link to tab2</a>
        </div>
        
        <div id="tab2" class="tab"> 
            Tab 2 content
        </div>
   </div>
</div>

CSS

.selection .active a {
    background:yellow;
}

JavaScript

$(document).ready(function() {
    $('a.tab-link').on('click', function(e)  {
        var currentAttrValue = $(this).attr('href');
 
        // Show/Hide Tabs
        $('.tabs ' + currentAttrValue).show().siblings().hide();
 
        // Change/remove current tab to active
        $(this).parent('li').addClass('active').siblings().removeClass('active');

        e.preventDefault();
    });
});