1

Помогите, плиз, начинающему. Задача: Пошаговое переключение между тремя блоками по клику. Шаг№1. клик по кнопке. блок с кнопкой исчезает. появляется блок с формой Шаг№2. клик по кнопке в форме. форма исчезает. появляется блок с сообщением.

Проблема: кликнутые элементы исчезают, но новые не появляются(

Заранее спасибо!

jQuery(document).ready(function($) { 

$('.sharebutton').click(function()
	{
		$('.start').hide();
		var form = $('.radioform').css('display') = 'block';
		$(form).toggle("fast");

	});
$('.send').click(function()
	{
		$('.radioform').hide();
		var message = $('.tellend').css('display') = 'block';
		$(message).toggle("fast");

	});



});
.radioform {
			display:none;
		}
		
.tellend {
			display:none;
		}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.js"></script>
	<script type="text/javascript" src="script.js"></script>

	
</head>
<body>

  
            <!--1st block. Button-->
            		<div class="start">
            			<span class="tell">Поделись!</span><br><br>
            			<button class="sharebutton">Делиться!</button>
            		</div>
             <!--2nd block. Form-->	
                    <form class="radioform">
                    <div class="radio">
                      <label>
                        <input type="radio" checked>
                        через SMS

                      </label>
                       <input type="text" placeholder="+380"><br>
                    </div>
                    <div class="radio">
                      <label>
                        <input type="radio">
                        через E-mail
                      </label>
                    </div>	<br>
                
                      <div class="form-group">
                          <button type="submit" class="send">Отправить</button>
                      </div>
                    </form>
                    
               <!--3rd block. Message-->
               <span class="tellend">Спасибо что поделились!</span>
	
	
</body>
</html>

1 ответ 1

2

Исправил только JS:

jQuery(document).ready(function($) { 

$('.sharebutton').click(function()
	{
		$('.start').hide();
		var form = $('.radioform').css('display', 'block');
	});
$('.send').click(function()
	{
		$('.radioform').hide();
		var message = $('.tellend').css('display', 'block');

	});
});
.radioform {
			display:none;
		}
		
.tellend {
			display:none;
		}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.js"></script>
	<script type="text/javascript" src="script.js"></script>

	
</head>
<body>

  
            <!--1st block. Button-->
            		<div class="start">
            			<span class="tell">Поделись!</span><br><br>
            			<button class="sharebutton">Делиться!</button>
            		</div>
             <!--2nd block. Form-->	
                    <form class="radioform">
                    <div class="radio">
                      <label>
                        <input type="radio" checked>
                        через SMS

                      </label>
                       <input type="text" placeholder="+380"><br>
                    </div>
                    <div class="radio">
                      <label>
                        <input type="radio">
                        через E-mail
                      </label>
                    </div>	<br>
                
                      <div class="form-group">
                          <button type="submit" class="send">Отправить</button>
                      </div>
                    </form>
                    
               <!--3rd block. Message-->
               <span class="tellend">Спасибо что поделились!</span>
	
	
</body>
</html>

5
  • спасибо, то что надо! в боевой версии (полной верстке) все идеально. в краткой версии, которую делала для вопроса, есть проблемка: третий блок .tellend появляется на секунду, сам исчезает, а потом видимо страница перезагружается на начало. чисто для развития - не подскажете почему так?
    – Anastasia
    8 июл 2015 в 13:37
  • Но здесь такой проблемы нет? Я не понимаю в чём проблема. :)
    – SlyDeath
    8 июл 2015 в 13:43
  • ну типа для себя)
    – Anastasia
    8 июл 2015 в 13:45
  • В смысле я не вижу описанной проблемы. Ничего не исчезает само. :) Демо можно?
    – SlyDeath
    8 июл 2015 в 13:59
  • это какая-то магея :) в сниппете работает, в полной версии моей верстки работает, а в укороченной - нет. ну и пёс с ней. еще раз спасибо за помощь!
    – Anastasia
    8 июл 2015 в 14:18

Ваш ответ

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

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