JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    	<h1>Tabbed Content</h1>
 <a href="#tab-1" class="tab active">Tab 1</a>
 <a href="#tab-2" class="tab">Tab 2</a>

    <div id="tabbed-content">
        <div id="tab-1" class="tab-content"></div>
        <div id="tab-2" class="tab-content hidden"></div>
    </div>
</div>

CSS

#container {
    width:400px;
    margin: 0 auto;
}
h1 {
    font: bold 30px arial;
}
.tab {
    width: 200px;
    height: 30px;
    background: #ccc;
    display: block;
    float: left;
}
.tab:hover {
    background: #333
}
.tab.active {
    background: #333;
}
#tab-1 {
    background: #f00;
    width: 400px;
    height: 400px;
}
#tab-2 {
    background: #00f;
    width: 400px;
    height: 400px;
}
.hidden {
    display: none;
}

JavaScript

//This is okay I think?  Are there any better ways to do this?
$(document).ready(function () {
    $(".tab").click(function () {
        $("#tabbed-content .tab-content").hide();
        $($(this).attr("href")).show();
    });
});


//This is where I'm struggling - I want to add the active class to tab 2 and remove it from tab 1 and vice versa when the inactive tab is clicked.  
//What I have adds the class to the inactive tab but doesn't remove the class from the active tab.

$(document).ready(function () {
    $(".tab").click(function () {
        $(".tab").removeClass("active");
        $(this).addClass("active");
    });
});