Как реализовать такие “активные” табы?

Как сделать так, чтобы при клике на верхний или нижний таб, у обоих одновременно менялся бэкграунд на белый? Я смог реализовать только сами табы, без этого эффекта.

Пример, с минимальной разметкой:

    <div class="tab-links">
      <ul>
            <li>
          <a href="#tab1">Tab 1</a>
      </li>
      <li>
                <a href="#tab2">Tab 2</a>
      </li>
        </ul>
    </div>
    <div class="tab-item-wrapper">
        <div class="tab-item" id="tab1">Content 1</div>
        <div class="tab-item" id="tab2">Content 2</div>
    </div>
    <div class="tab-links">
        <ul>
            <li>
          <a href="#tab1">Tab 1</a>
      </li>
      <li>
                <a href="#tab2">Tab 2</a>
      </li>
        </ul>
    </div>`

var tabContainers = $('.tab-item-wrapper .tab-item');
tabContainers.hide().filter(':first').show();
$('.tab-links .tab__menu__link').click(function () {
    tabContainers.hide();
    tabContainers.filter(this.hash).fadeIn("slow");
    $('.tab-links .tab__menu__link').removeClass('selected');
    $(this).addClass('selected');
    return false;
}).filter(':first').click();