0

Вот эти табы.

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

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

    <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();
1
  • 1
    Нужно вставить пример в виде запускаемого кода, а не просто текстом Commented 6 окт. 2018 в 16:49

1 ответ 1

0

Я бы сделал выбор второго таба по href атрибуту и добавлял уже к ним класс selected.

 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');
        var links = $(this).attr('href');
        $('a[href=\\'+links+']').addClass('selected');
        return false;
    }).filter(':first').click();

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.