cwecwec

HTML

<div class="tab-wrapper">
  <div class="tab-menu-main">
    <ul id="menu-faq" class="menu-result">
      <li id="menu-item-1355" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1355 active"><span>Главное меню 1</span></li>
      <li id="menu-item-1354" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1354 "><span>Главное меню 2</span></li>
    </ul>
  </div>
  <div class="tab-content-main">
    <section>
      <div class="results-nav tab-menu">
        <ul id="menu1" class="menu-result">
          <li id="menu-item-897" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-897 active"><span>Подменю 1</span></li>
          <li id="menu-item-898" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-898"><span>Подменю 2</span></li>
        </ul>
      </div>
      <div class="results-list tab-content">
        <div>
          1 вкладка
        </div>
        <div>
          2 вкладка
        </div>
      </div>
    </section>
    <section>
      <div class="results-nav tab-menu">
        <ul id="menu2" class="menu-result">
          <li id="menu-item-1356" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1356"><span>Подменю 3</span></li>
          <li id="menu-item-1357" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1357"><span>Подменю 4</span></li>
        </ul>
      </div>
      <div class="results-list tab-content">
        <div>
          3 вкладка
        </div>
        <div>
          4 вкладка
        </div>
      </div>
    </section>
  </div>
</div>

CSS

.tab-menu-main ul {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 50px 0;
  font-family: 'Acrom';
  padding-left: 50px;
}

.tab-menu-main ul li {
  background: white;
  padding: 20px 10px;
  font-size: 18px;
  color: #ff887c;
  border-radius: 50px;
  text-transform: uppercase;
  margin-right: 50px;
  width: 262px;
  text-align: center;
  font-weight: 600;
  cursor: pointer;
  -webkit-box-shadow: 0px 7px 13.76px 2.24px rgba(255, 136, 124, 0.16);
  box-shadow: 0px 7px 13.76px 2.24px rgba(255, 136, 124, 0.16);
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.tab-menu-main ul li:hover,
.tab-menu-main ul li:active,
.tab-menu-main ul li:focus {
  background: #ff887c;
  color: #fff;
  box-shadow: none;
}

.tab-menu-main ul li.active {
  background: #ff887c;
  color: #fff;
  box-shadow: none;
}

.results-nav {
  margin: 50px 0 0 0;
  border-bottom: 1px solid #e4e4e4;
  padding: 0 0 11px 0;
}

.results-nav ul {
  display: block;
  font-size: 0px;
}

.results-nav li {
  display: inline-block;
  margin: 0 88px;
}

.results-nav li a,
.results-nav li span {
  font-weight: bold;
  color: #a9a9a9;
  font-size: 16px;
  line-height: 16px;
  text-decoration: none;
  font-family: 'Acrom';
  text-transform: uppercase;
  position: relative;
  transition: 0.5s;
  cursor: pointer;
}

.results-nav li a:hover,
.results-nav li span:hover {
  color: #4aded8;
}

.results-nav li a::before,
.results-nav li span::before {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  position: absolute;
  bottom: -23px;
  left: 50%;
  margin: 0 0 0 -6px;
  background: #d3d3d3;
  border-radius: 50%;
}

.results-nav li.active a,
.results-nav li.active span {
  color: #4aded8;
}

.results-nav li.active a::before,
.results-nav li.active span::before {
  background: #4aded8;
}

.results-nav...

JavaScript

//TABS
var $wrapper = $(".tab-wrapper"),
  $allTabsMain = $wrapper.find(".tab-content-main > section"),
  $tabMenuMain = $wrapper.find(".tab-menu-main li"),
  $allTabs = $wrapper.find(".tab-content > div"),
  $tabMenu = $wrapper.find(".tab-menu li");

$allTabsMain.not(":first-of-type").hide();
$tabMenuMain.filter(":first-of-type").find(":first").width("100%");
$allTabs.not(":first-of-type").hide();
$tabMenu.filter(":first-of-type").find(":first").width("100%");

$allTabsMain.each(function(i) {
  $(this).attr("data-tab", "tabmain" + i);
});
$allTabs.each(function(i) {
  $(this).attr("data-tab", "tab" + i);
});

$tabMenuMain.each(function(i) {
  $(this).attr("data-tab", "tabmain" + i);
});
$tabMenu.each(function(i) {
  $(this).attr("data-tab", "tab" + i);
});

$("#menu-deformaciya li:first").addClass("active");
$("#menu-skoleoz li:first").addClass("active");
$("#menu-faq li:first").addClass("active");

$tabMenuMain.on("click", function() {
  var dataTabMain = $(this).data("tab"),
    $getWrapper = $(this).closest($wrapper);

  $getWrapper.find($tabMenuMain).removeClass("active");
  $(this).addClass("active");
  $getWrapper
    .find($allTabsMain)
    .hide();
  $getWrapper
    .find($allTabsMain)
    .filter("[data-tab=" + dataTabMain + "]")
    .show();
});

$tabMenu.on("click", function() {
  var dataTab = $(this).data("tab"),
    $getWrapper = $(this).closest('section');

  $getWrapper.find($tabMenu).removeClass("active");
  $(this).addClass("active");
  $getWrapper
    .find($allTabs)
    .hide();
  $getWrapper
    .find($allTabs)
    .filter("[data-tab=" + dataTab + "]")
    .show();
});

$(".tab-menu li a").replaceWith(function() {
  return $("<span />").append($(this).contents());
});
$(".tab-menu-main li a").replaceWith(function() {
  return $("<span />").append($(this).contents());
});