Показать сообщение отдельно
  #7 (permalink)  
Старый 07.10.2017, 21:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

WhiteFox,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .setting:nth-child(n + 2){
     display: none;
  }

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

  <script>
$(function() {
var i = 0, s = $(".setting"), len = s.length-1;
function fn(n)
{
  n += i;
  if(n < 0 || n > len) return;
  s.eq(i).stop().fadeOut();
  s.eq(n).stop().fadeIn();
  i = n;
}
$(".next").click(function() {fn(1)})
$(".back").click(function() {fn(-1)})

});
  </script>
</head>

<body>
<header class="step_1 setting">
    <div class="container">
      <div class="row">
        <div class="content">
          <h1>Получите подробный расчет вашего мероприятия за 5 простых шагов.</h1>
          111
          <div class="button">
            <button class="next">Начать</button>
            <button>Расчет не нужен</button>
          </div>
        </div>
      </div>
    </div>
    <div class="ready">
    <p>0%</p>
    </div>
  </header>
  <section class="step_2 setting">
    <div class="container">
      <div class="row">
        <div class="content">
          <h1>Тимбилдинг-программа</h1>
          222
          <div class="button">
            <button class="back">На шаг назад</button>
            <button class="next">Дальше</button>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="step_3 setting">
    <div class="container">
      <div class="row">
        <div class="content">
          <h1>Площадка</h1>
          333
          <div class="button">
            <button class="back">На шаг назад</button>
            <button class="next">Дальше</button>
          </div>
        </div>
      </div>
    </div>
  </section>

</body>
</html>

Последний раз редактировалось рони, 07.10.2017 в 23:28.
Ответить с цитированием