Допилил табы

src/blocks-demo.html

@@ -1865,6 +1865,8 @@
 
       <h2 class="blocks-library__item-title">Вкладки</h2>
 
+      <p>После загрузки смотрит на адресную строку, показывает нужную вкладку, если она есть.</p>
+
       <div class="tabs">
         <ul class="tabs__links" role="tablist">
           <li class="tabs__link-wrap  tabs__link-wrap--active" role="presentation">

src/blocks/tabs/tabs.js

 document.addEventListener('DOMContentLoaded', function(){
 
-  var tabsParentClassName = 'tabs';
-  var shownTabClassName = 'tabs__content-item--active';
+  if(location.hash) {
+    showTab(location.hash);
+  }
 
+  // Следим за поднимающимися кликами
   document.addEventListener('click', function(event) {
     if(event.target.dataset.toggle === 'tab') {
       event.preventDefault();
       var target = event.target.hash === undefined ? event.target.dataset.target : event.target.hash;
-      // console.log( target );
       if ( target !== undefined ) {
-        var tabsParent = document.querySelector(target).closest('.'+tabsParentClassName);
-        tabsParent.querySelectorAll('.'+shownTabClassName).forEach(function(item){
-          item.classList.remove(shownTabClassName);
-        });
-        tabsParent.querySelector(target).classList.add(shownTabClassName);
+        showTab(target);
+        if(history && history.pushState && history.replaceState) {
+          var stateObject = {'url' : target};
+          if (window.location.hash && stateObject.url !== window.location.hash) {
+            window.history.pushState(stateObject, document.title, window.location.pathname + target);
+          } else {
+            window.history.replaceState(stateObject, document.title, window.location.pathname + target);
+          }
+        }
       }
     }
   });
 
+  /**
+   * Показывает таб
+   * @param  {string} tabId ID таба, который нужно показать
+   */
+  function showTab(tabId){
+    var element = document.querySelector(tabId);
+    if ( element && element.classList.contains('tabs__content-item') ) {
+      var tabsParent = document.querySelector(tabId).closest('.tabs');
+      var activeTabClassName = 'tabs__link-wrap--active';
+      var activeTabContentClassName = 'tabs__content-item--active';
+      // таб
+      tabsParent.querySelectorAll('.'+activeTabClassName).forEach(function(item){
+        item.classList.remove(activeTabClassName);
+      });
+      var activeTab = tabsParent.querySelector('[href="'+tabId+'"]') ? tabsParent.querySelector('[href="'+tabId+'"]') : tabsParent.querySelector('[data-target="'+tabId+'"]')
+      activeTab.closest('.tabs__link-wrap').classList.add(activeTabClassName);
+      // контент таба
+      tabsParent.querySelectorAll('.'+activeTabContentClassName).forEach(function(item){
+        item.classList.remove(activeTabContentClassName);
+      });
+      tabsParent.querySelector(tabId).classList.add(activeTabContentClassName);
+    }
+  }
+
   // Добавление метода .closest() (полифил, собственно)
   (function(e){
    e.closest = e.closest || function(css){

src/blocks/tabs/tabs.scss

@@ -2,7 +2,10 @@
 // модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
 // Не пишите здесь другие селекторы.
 
+$gray-lightest:               hsl(0, 0%, 90%) !default;
+
 $text-color:                  hsl(0, 0%, 10%) !default;
+$text-color--muted:           hsl(0, 0%, 50%) !default;
 
 $border-color:                hsl(0, 0%, 60%) !default;
 
@@ -43,24 +46,29 @@ $field-padding-horizontal:    0.7em !default;
     position: relative;
     border: 1px solid $border-color;
 
-    &:not(:first-child) {
-      margin-left: -1px;
+    &:not(:last-child) {
+      border-right: none;
     }
 
     &--active {
-      z-index: 1;
+
+      #{$block-name}__link {
+        color: $text-color;
+        background-color: #fff;
+      }
     }
   }
 
   &__link {
     display: block;
     padding: $field-padding-vertical $field-padding-horizontal;
-    color: $text-color;
+    color: $text-color--muted;
     text-decoration: none;
+    background-color: $gray-lightest;
 
     &:hover,
     &:focus {
-      color: $text-color;
+      color: $text-color--muted;
     }
   }