0

Здравствуйте уважаемые разработчики! Есть такой код

$('[data-type]').on('click', function () {
      $('[data-type]').removeClass('active');
      $(this).addClass('active');
  });

$('[data-type="1"').click();
[data-toggle] {
  display: none;
}
[data-toggle="active"] {
  display: block;
  color: red;
}
[data-type].active {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="active" data-type="1">
  <h2>1</h2>
</a>
<a class="" data-type="2">

  <h2>2</h2>
</a>
<a class="" data-type="3">
  <h2>3</h2>
</a>

<div class="active" data-toggle="active">1</div>
<div class="" data-toggle="">2</div>
<div class="" data-toggle="">3</div>

Суть в том, что при нажатии на цифру, необходимо присваивать класс active для цифры по которой нажали и соответствующей цифре в другом блоке

CSS трогать не нужно вообще.

Можете пожалуйста подсказать как правильно поступить ? Т.е. нужно отследить нажатие по data-type (this) и передать его в data-toggle как я понял, или может по другому ?

1 ответ 1

1

data-toggle нужно заменить на соответствующие значения data-type. Например если вы хотите что бы data-type="partner" был активен то data-toggle="partner" тоже должен быть с таким значением

$("[data-type]").on("click", function() {
        const $curType = $(this).attr("data-type");
        $("[data-type]").removeClass("active");
        $(this).addClass("active");
        $("[data-toggle]").each(function() {
          const $this = $(this);
          if ($this.attr("data-toggle") === $curType) {
            $this.addClass("active");
          } else {
            $this.removeClass("active");
          }
        });
      });
 [data-toggle] {
        display: none;
      }
      [data-toggle="active"] {
        display: block;
      }
      [data-type].active {
        color: red;
      }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="active" data-type="partner">
      <h2>лучшие партнеры</h2>
    </a>
    <a class="" data-type="invest">
      <h2>крупнейшие инвесторы</h2>
    </a>
    <a class="" data-type="plan">
      <h2>популярные планы</h2>
    </a>

    <div class="active" data-toggle="partner">партнеры</div>
    <div class="" data-toggle="invest">инвесторы</div>
    <div class="" data-toggle="plan">планы</div>

1
  • Благодарю, Александр!)
    – ccxdec
    5 фев 2019 в 19:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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