JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://libraries.cdnhttps.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.min.css">
<script src="https://libraries.cdnhttps.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.min.js"></script>
<nav class="navigation">
    <ul class="nav-primary">
        <li class="nav-primary-item"><a class="menu" href="#menu" data-target="sources"><i class="ico plus-yellow">+</i> Sources</a></li>
        <li class="nav-primary-item"><a class="menu" href="#menu" data-target="topics"><i class="ico plus-yellow">+</i> Topics</a></li>
        <li class="nav-primary-item"><a class="menu" href="#menu" data-target="geography"><i class="ico plus-yellow">+</i> Geography</a></li>
    </ul>

    <ul class="nav-secondary">
        <li class="nav-secondary-item"><a class="menu" href="#menu" data-target="tools"><i class="ico plus-greyishblue">+</i> Tools</a></li>
        <li class="nav-secondary-item"><a class="menu" href="#menu" data-target="learn"><i class="ico plus-greyishblue">+</i> Learn</a></li>
        <li class="nav-secondary-item"><a class="menu" href="#menu" data-target="news"><i class="ico plus-greyishblue">+</i> News</a></li>
    </ul>

    <div class="nav-menu" style="display: none">
        <div class="nav-tabs page_tabs" id="menu">
            <ul class="ui-tabs-nav" role="tablist">
                <li role="tab"><a href="#sources">Sources</a></li>
                <li role="tab"><a href="#topics">Topics</a></li>
                <li role="tab"><a href="#geography">Geography</a></li>
                <li role="tab"><a href="#tools">Tools</a></li>
                <li role="tab"><a href="#learn">Learn</a></li>
                <li role="tab"><a href="#news">News</a></li>
            </ul>
            <!--Sources and Uses-->
            <div id="sources">
                Content here
            </div>

            <!--Topics-->

            <div id="topics">
                Content Here
            </div>

            <!--Geography-->

            <div...

CSS

.content {
    top: 98px;
    position: relative;
    header {
        position: fixed;
        left: 0;
        width: 100%;
        height: 91px;
        border-top: solid 5px #265281;
        border-bottom: solid 1px #d1d3d5;
        z-index: 99;
        background-color: #003C57;
        transition: height 0.3s;
        -webkit-transition: height 0.3s;
        -moz-transition: height 0.3s;
        -ms-transition: height 0.3s;
        -o-transition: height 0.3s;
        .navigation {
            text-align: center;
            width: 950px;
            height: 91px;
            margin: 0 auto !important;
            h1 {
                display: block;
                font-size: 0;
                height: 91px;
                width: 321px;
                float: left;
                background-image: url(../images/eia_logo.jpg);
                margin-right: 25px;
                transition: all 0.3s;
                -webkit-transition: all 0.3s;
                -moz-transition: all 0.3s;
                -ms-transition: all 0.3s;
                -o-transition: all 0.3s;
            }
            /*Navigation Main Tabs Sources&Uses Topics Geography and Secondary Tabs Tools Learn About Energy and News*/
            .nav-primary {
                padding: 0;
                width: 340px;
                display: block;
                float: left;
                margin: 50px 0 0 0;
            }
            .nav-secondary {
                margin: 8px 0 0 8px;
                border-bottom: solid 1px #214a77;
                float: right;
                width: 230px;
                padding: 0 4px;
            }
            .nav-primary li {
                padding: 0 14px;
            }
            .nav-primary li:nth-child(-n+2) {
                border-right: 1px solid #fff;
            }
            /*give padding to first li item secondary tabs*/
            .nav-secondary li:nth-child(-n+1) {
                padding-left: 5px;
            }
           ...

JavaScript

$('.menu').fancybox({
    type: 'inline',
    scrolling: 'auto',
    width: 940,
    height: 'auto',
    padding: 0,
    autoSize: false,
    tpl: {
        closeBtn: '<a title="Close" class="fancybox-item fancybox-close fancyboxBtn" href="javascript:;"></a>'
    },
    helpers: {
        overlay: {
            locked: false
        }
    }
});

$(document).on("click", ".menu", function() {
    var target = $(this).data("target");
    console.log(target);
    $("li").has("a[href='#" + target + "']").addClass("active").siblings().removeClass("active");
    $("div[id='"+target+"']").addClass("active").siblings().removeClass("active");
});