БЛОГ НА HUSL


Настройка Tabs JS

Автор вопроса: GreedyWizards

Помогите пожалуйста настроить табы таким образом чтобы при переключении в меню отображалась правильная вкладка. На данный момент когда переключаешься между главными пунктами меню то всё скрывается правильно, а когда переключаешь подменю в каждой вкладке то скрываются все элементы. Объяснить сложновато, но поюзав меню проблема думаю будет понятна. Помогите подправить код чтобы отображение при переключении было правильное. Спасибо большое

//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($wrapper);

  $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());
});
.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 li.current-menu-item a,
.results-nav li.current-menu-item span {
  color: #292929;
}

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

.results-list {
  padding: 47px 0 0 0;
  margin: 0 -11px;
}

.results-list a.item {
  border-radius: 20px;
  background: #FFF;
  box-shadow: 0px 7px 22.41px 4.59px rgba(150, 150, 150, 0.24);
  width: 356px;
  display: inline-block;
  text-decoration: none;
  margin: 11px;
  vertical-align: top;
  overflow: hidden;
  position: relative;
}

.results-list div.toggle-item {
  display: none;
}

.results-list a.item .one {
  padding: 17px 17px 25px 17px;
}

.results-list a.item .two {
  background: #fee0dd;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 100%;
  bottom: 0px;
  padding: 73px 23px 23px;
  box-sizing: border-box;
  transition: 0.5s;
}

.results-list a.item:hover .two {
  top: 0px;
}

.results-list a.item div.thumb {
  padding: 0 0 20px 0;
}

.results-list a.item div.thumb img {
  border-radius: 10px;
  width: 100%;
  height: auto;
  border: none;
  vertical-align: bottom;
}

.results-list a.item .one span {
  display: block;
  font-size: 16px;
  line-height: 19px;
  color: #414141;
  padding: 0 8px;
  font-family: 'Acrom';
}

.results-list a.item .one p {
  display: block;
  color: #414141;
  font-size: 16px;
  line-height: 19px;
}

.results-list a.item .one .description {
  padding: 10px 8px;
}

.results-list a.item .down .left,
.results-list a.item .down .right {
  font-family: 'Acrom';
  padding: 0 8px;
  font-weight: bold;
}

.results-list a.item .down {
  padding: 10px 0 0 0;
}

.results-list a.item .down .left {
  font-size: 16px;
  line-height: 16px;
  color: #fc867b;
  position: relative;
}

.results-list a.item .down .left::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  background: url("images/loadmore-pink.svg") no-repeat center center;
  background-size: 16px 16x;
  position: absolute;
  top: 50%;
  right: -17px;
  margin: -8px 0 0 0;
}

.results-list a.item .down .right {
  font-size: 12px;
  line-height: 12px;
  color: #b3b3b3;
  padding-top: 2px;
}

.results-list a.item .two span {
  display: block;
  font-size: 16px;
  line-height: 19px;
  color: #414141;
  font-family: 'Acrom';
}

.results-list a.item .two p {
  display: block;
  color: #414141;
  font-size: 16px;
  line-height: 19px;
}

.results-list a.item .two .description {
  padding: 40px 0 0px;
}

.results-list a.item .two .type {
  text-align: center;
  margin-top: 50px;
}

.results-list a.item .two .type strong {
  background: #FFF;
  box-shadow: 0px 7px 13.76px 2.24px rgba(255, 136, 124, 0.16);
  width: 235px;
  height: 67px;
  box-sizing: border-box;
  display: inline-block;
  font-size: 20px;
  line-height: 20px;
  color: #fc867b;
  font-family: 'Acrom';
  font-weight: bold;
  border-radius: 35px;
  text-align: left;
  padding: 22px 0 22px 48px;
  position: relative;
}

.results-list a.item .two .type strong::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  background: url("images/loadmore-pink.svg") no-repeat center center;
  background-size: 16px 16x;
  position: absolute;
  top: 50%;
  right: 53px;
  margin: -8px 0 0 0;
}

.results-list a.item .two i {
  padding: 17px 0 0 0;
  display: block;
  text-align: center;
  font-style: normal;
  font-size: 16px;
  line-height: 16px;
  font-weight: bold;
  font-family: 'Acrom';
  color: #9f908f;
}

.results-loadmore {
  text-align: center;
  padding: 85px 0 0 0;
}

.results-loadmore a {
  background: #FFF;
  box-shadow: 0px 7px 13.76px 2.24px rgba(255, 136, 124, 0.16);
  width: 370px;
  display: inline-block;
  font-size: 18px;
  line-height: 18px;
  color: #ff887c;
  font-weight: bold;
  font-family: 'Acrom';
  text-transform: uppercase;
  padding: 24px 0 24px 52px;
  box-sizing: border-box;
  text-align: left;
  border-radius: 35px;
  text-decoration: none;
  position: relative;
}

.results-loadmore a::before {
  content: '';
  display: block;
  width: 51px;
  height: 51px;
  border-radius: 50%;
  box-shadow: 0px 7px 8px 0px rgba(255, 136, 124, 0.16);
  background: #ff887c url("images/loadmore.svg") no-repeat center center;
  background-size: 21px 21px;
  position: absolute;
  top: 7px;
  right: 14px;
  transition: 0.2s;
}

.results-loadmore a:hover::before {
  right: 11px;
}

.results-loadmore a.loading::before {
  background: #ff887c url("images/loading.svg") no-repeat center center;
  background-size: 31px 31px;
}

.results-loadmore a.loading:hover::before {
  right: 14px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>


Источник

Ответы (0 шт):

licensed under cc by-sa 3.0 with attribution.