Форум

Ingred · #1 (**permalink**) 24.07.2018, 20:10

здравствуйте! Проблема вот в чем...имеется страница со следующей структурой

<div class="subs-bg blue"><div class="slider content">
  <div class="heading row">
                <a class="asub" data-subs="blue">Ежемесячный</a>
                <a class="asub" data-subs="green">Годовой</a>
                <a class="asub active" data-subs="red">3D Сцены</a>
  </div>
  <div class="items row">
      <div class="item month col-md-6 col-xs-12">
        <span class="header">Базовый</span>
        <div class="text-center">
        </div>
        <div class="price">
          <p class="cur cur-rub">100</p>
        </div>
        <div class="desc">
          3 моделей в месяц          <a href="/?route=account/signup"><br>+ Начать</a>
        </div>
      </div>
      <div class="item year col-md-6 col-xs-12">
        <span class="header">Базовый</span>
        <div class="text-center">
        </div>
        <div class="price">
          <p class="cur cur-rub">1200</p>
        </div>
        <div class="desc">
          40 моделей в год          <a href="/?route=account/signup"><br>+ Начать</a>
        </div>
      </div>
<div class="item sceny col-md-6 col-xs-12">
        <span class="header">Базовый</span>
        <div class="text-center">
        </div>
        <div class="price">
          <p class="cur cur-rub">1200</p>
        </div>
        <div class="desc">
          40 моделей в год          <a href="/?route=account/signup"><br>+ Начать</a>
        </div>
      </div>
  </div>
</div></div>

содержимое переключалось так:

$(".asub").on("click", function(e) {
  $(".asub").removeClass('active');
  $(this).addClass('active');
  
  if( $(this).attr('data-subs') == 'green' ) {
    x = 'blue';
    y = 'green';  
  	$('.month').removeClass('on');   
  	$('.year').addClass('on');
  } else {
    x = 'green';
    y = 'blue';
  	$('.year').removeClass('on');
  	$('.month').addClass('on');
  }
  $(".subs-bg").removeClass(x);
  $(".subs-bg").addClass(y);
});

Нужно добавить еще один раздел "red" c классом содержимого sceny
Добавила вот так

$(".asub").on("click", function(e) {
  $(".asub").removeClass('active');
  $(this).addClass('active');

    if( $(this).attr('data-subs') == 'green' ) {
    x = 'blue';
    y = 'green';
    z = 'red';
  	$('.month').removeClass('on');
    $('.sceny').removeClass('on');
  	$('.year').addClass('on');
  } 
    if( $(this).attr('data-subs') == 'blue' ) {
    x = 'blue';
    y = 'green';
    z = 'red';
  	$('.month').addClass('on');
    $('.sceny').removeClass('on');
  	$('.year').removeClass('on');
  }  
    if( $(this).attr('data-subs') == 'red' ) {
    x = 'blue';
    y = 'green';
    z = 'red';
  	$('.month').removeClass('on');
    $('.sceny').addClass('on');
  	$('.year').removeClass('on');
  }      
  $(".subs-bg").removeClass(x);
  $(".subs-bg").addClass(y);
});

Вроде бы работает, но при клике на "red" к subs-bg встает класс green, если правильно понимаю из-за последних двух строк. а как исправить их - не понимаю. Заранее спасибо за помощь

рони · #2 (**permalink**) 24.07.2018, 21:14

Ingred,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .red {
      background-color: #FF0000;
  }
  .blue{
     background-color: #0000FF;
  }
  .green{
     background-color:  #008000;
  }
  .active {
      color: #FFFFFF;
  }
  .on {
      border: 1px solid #FFFF00;
      color: #FFFFFF;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    var asub = $(".asub"),
        items = $(".item"),
        bg = $(".subs-bg");
    var nameCls = $.map(asub, function(el, i) {
        el = $(el);
        var cls = el.data("subs");
        el.on("click", function(e) {
            asub.removeClass("active");
            el.addClass("active");
            items.removeClass("on").eq(i).addClass("on");
            bg.removeClass(nameCls).addClass(cls)
        });
        return cls
    });
    nameCls = nameCls.join(" ")
});
  </script>
</head>

<body>
<div class="subs-bg red"><div class="slider content">
  <div class="heading row">
                <a class="asub" data-subs="blue">Ежемесячный</a>
                <a class="asub" data-subs="green">Годовой</a>
                <a class="asub active" data-subs="red">3D Сцены</a>
  </div>
  <div class="items row">
      <div class="item month col-md-6 col-xs-12">
        <span class="header">Базовый</span>
        <div class="text-center">
        </div>
        <div class="price">
          <p class="cur cur-rub">100</p>
        </div>
        <div class="desc">
          3 моделей в месяц          <a href="/?route=account/signup"><br>+ Начать</a>
        </div>
      </div>
      <div class="item year col-md-6 col-xs-12">
        <span class="header">Базовый</span>
        <div class="text-center">
        </div>
        <div class="price">
          <p class="cur cur-rub">1200</p>
        </div>
        <div class="desc">
          40 моделей в год          <a href="/?route=account/signup"><br>+ Начать</a>
        </div>
      </div>
<div class="item sceny col-md-6 col-xs-12 on">
        <span class="header">Базовый</span>
        <div class="text-center">
        </div>
        <div class="price">
          <p class="cur cur-rub">1200</p>
        </div>
        <div class="desc">
          40 моделей в год          <a href="/?route=account/signup"><br>+ Начать</a>
        </div>
      </div>
  </div>
</div></div>

</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript