1

Почему-то при нажатии и как на "авторереферат", так и на "диссертация", появляется один и тот же список ("автореферат"). И помимо этого больше никак не отрабатывает

$('.archive-btn').on('click', function() {
  $('.archive-btn').removeClass('active');

  if (!$(this).hasClass('active')) {
    $(this).addClass('active');
  }

  $('.list').removeClass('active');

  if (!$('.list').hasClass('active') && $('.list').has('#synopsis')) {
    $('.list#synopsis').addClass('active');
  } else if (!$('.list').hasClass('active') && $('.list').has('#essay')) {
    $('.list#essay').addClass('active');
  } else if (!$('.list').hasClass('active') && $('.list').has('#dissertation')) {
    $('.list#dissertation').addClass('active');
  }
});
#archive-content .items .list {
  display: none;
}
#archive-content .items .list.active {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="archive-block" class="block-decor">
  <div class="triangle"></div>
  <div id="archive-content">
    <div id="archive-border-top-left"></div>
    <div class="items">
      <ul class="list" id="synopsis">
        <li>Запись1 (автореферат)</li>
        <li>Запись2</li>
        <li>Запись3</li>
        <li>Запись4</li>
        <li>Запись5</li>
        <li>Запись6</li>
        <li>Запись7</li>
        <li>Запись8</li>
        <li>Запись9</li>
      </ul>
      <ul class="list active" id="essay">
        <li>Запись1 (реферат)</li>
        <li>Запись2</li>
        <li>Запись3</li>
        <li>Запись4</li>
        <li>Запись5</li>
        <li>Запись6</li>
        <li>Запись7</li>
        <li>Запись8</li>
        <li>Запись9</li>
      </ul>
      <ul class="list" id="dissertation">
        <li>Запись1 (диссертация)</li>
        <li>Запись2</li>
        <li>Запись3</li>
        <li>Запись4</li>
        <li>Запись5</li>
        <li>Запись6</li>
        <li>Запись7</li>
        <li>Запись8</li>
        <li>Запись9</li>
      </ul>
    </div>
    <div class="buttons">
      <button id="synopsis" class="archive-btn">Автореферат</button>
      <button id="essay" class="archive-btn active">Реферат</button>
      <button id="dissertation" class="archive-btn">Диссертация</button>
    </div>
  </div>

А в сниппете и вовсе не хочет работать...

1 ответ 1

2

Подход при создании таких переключателей должен быть проще

  1. с классом active может быть только один элемент
  2. при переключении убрать уже установленный класс active, и добавить его к текущему элементу

$('.archive-btn').on('click', function() {
  $('.archive-btn.active, .list.active').removeClass('active');

  $($(this).addClass('active').data('id')).addClass('active');
});
#archive-content .items .list {
  display: none;
}
#archive-content .items .list.active {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="archive-block" class="block-decor">
  <div class="triangle"></div>
  <div id="archive-content">
    <div id="archive-border-top-left"></div>
    <div class="items">
      <ul class="list" id="synopsis">
        <li>Запись1 (автореферат)</li>
        <li>Запись2</li>
        <li>Запись3</li>
        <li>Запись4</li>
        <li>Запись5</li>
        <li>Запись6</li>
        <li>Запись7</li>
        <li>Запись8</li>
        <li>Запись9</li>
      </ul>
      <ul class="list active" id="essay">
        <li>Запись1 (реферат)</li>
        <li>Запись2</li>
        <li>Запись3</li>
        <li>Запись4</li>
        <li>Запись5</li>
        <li>Запись6</li>
        <li>Запись7</li>
        <li>Запись8</li>
        <li>Запись9</li>
      </ul>
      <ul class="list" id="dissertation">
        <li>Запись1 (диссертация)</li>
        <li>Запись2</li>
        <li>Запись3</li>
        <li>Запись4</li>
        <li>Запись5</li>
        <li>Запись6</li>
        <li>Запись7</li>
        <li>Запись8</li>
        <li>Запись9</li>
      </ul>
    </div>
    <div class="buttons">
      <button data-id="#synopsis" class="archive-btn">Автореферат</button>
      <button data-id="#essay" class="archive-btn active">Реферат</button>
      <button data-id="#dissertation" class="archive-btn">Диссертация</button>
    </div>
  </div>

Ваш ответ

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

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