Show / hide tab content according to data attribute

tabs.css

.tabs-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tabs-menu__item {
  text-align: center;
}

.tabs-menu__item {
  background-color: #fff;
  border: 1px solid #d8d7d7;
  display: inline-block;
}
.tabs-menu__item.is-active {
  border-bottom: none;
  padding-bottom: 1px;
}

.tabs-menu__link {
  color: #ccc;
  display: block;
  padding: .75em 1.5em;
  text-decoration: none;
  text-transform: uppercase;
}
.tabs-menu__item.is-active .tabs-menu__link {
  color: #000;
}

.tabs-content {
  background-color: #fff;
  border: 1px solid #d8d7d7;
  margin-top: -1px;
  padding: 1.5em;
}

tabs.html

<div class="tabs">
    <ul class="tabs-menu">
        <li class="tabs-menu__item">
            <a href="#tab-1" class="tabs-menu__link">Tab 1</a>
        </li>
        <li class="tabs-menu__item">
            <a href="#tab-2" class="tabs-menu__link">Tab 2</a>
        </li>
    </ul>
    <div class="tabs-content">
        <div id="tab-1" class="tabs-content__item">
            Content 1
        </div>
        <div id="tab-2" class="tabs-content__item">
            Content 2
        </div>
    </div>
</div>

tabs.js

/*-----------------------
  @TABS

  Loads tab if valid hash is present
------------------------*/
ww.simple_tabs = (function(){
    var settings = {
        hash: window.location.hash.substr(1),
        $menu: $(".tabs-menu"),
        $menu_items: $(".tabs-menu__item"),
        $menu_links: $(".tabs-menu__link"),
        $content_items: $(".tabs-content__item"),
    };

    return {
        init: function() {
            this.register_handlers();

            if (settings.hash !== '') {
                this.load_hash();
            } else {
                var tab = settings.$menu_links.first().attr("href").replace("#", "");
                this.switch_tab(tab);
            }
        },

        register_handlers: function() {
            settings.$menu.on("click", settings.$menu_links, function(e) {
                var tab = $(e.target).attr("href").replace("#", "");

                e.preventDefault();
                ww.simple_tabs.switch_tab(tab);
            });
        },

        load_hash: function() {
            var $el = settings.$menu_links.filter("[href='#"+settings.hash+"']");

            if ($el.length) {
                ww.simple_tabs.switch_tab(settings.hash);
            } else {
                console.log("bad hash");
            }
        },

        switch_tab: function(tab) {
            var $link = settings.$menu_links.filter("[href=#"+tab+"]");

            $link.parent().addClass("is-active").siblings().removeClass("is-active");
            settings.$content_items.hide().filter($("#"+tab)).show();
        },
    };
})();

tabs.php

<?php
$tabs = [
    'tab-1' => [
        'label' => 'Tab 1 label',
        'content' => 'Tab 1 content',
    ],
    'tab-2' => [
        'label' => 'Tab 2 label',
        'content' => 'Tab 2 content',
    ],
];
?>
<div class="tabs">
    <ul class="tabs-menu">
        <?php foreach ($tabs as $_k => $_v): ?>
        <li class="tabs-menu__item">
            <a href="#<?=$_k?>" class="tabs-menu__link"><?=$_v['label']?></a>
        </li>
        <?php endforeach; ?>
    </ul>
    <div class="tabs-content">
        <?php foreach ($tabs as $_k => $_v): ?>
        <div id="<?=$_k?>" class="tabs-content__item">
            <?=$_v['content']?>
        </div>
        <?php endforeach; ?>
    </div>
</div>

tabs.scss

%unstyled {
    list-style: none;
    margin: 0;
    padding: 0;
}
%centered {
    text-align: center;
}
$tabs-background: #fff;
$tabs-border: 1px solid #d8d7d7;

.tabs-menu {
    @extend %unstyled;
}
.tabs-menu__item {
    @extend %centered;
    background-color: $tabs-background;
    border: $tabs-border;
    display: inline-block;

    &.is-active {
        border-bottom: none;
        padding-bottom: 1px;
    }
}
.tabs-menu__link {
    color: #ccc;
    display: block;
    padding: .75em 1.5em;
    text-decoration: none;
    text-transform: uppercase;

    .tabs-menu__item.is-active & {
        color: #000;
    }
}
.tabs-content {
    background-color: $tabs-background;
    border: $tabs-border;
    margin-top: -1px;
    padding: 1.5em;
}