Смена блоков при помощи js

Sarkerdo · 20 Авг 2016

Всем привет.
Нужна помощь.
Суть проблемы:
Как сделать смену блока div без перезагрузки страницы
пример вот как тут

Скрытое содержимое доступно для зарегистрированных пользователей!

Если нажать на кнопку меняется блок, и кнопка с названием
Вот мой блок формы регистрации

Код:

<div class="_nvyyp" style="display: none;">
<h1 class="_du7bh _soakw coreSpriteLoggedOutWordmark">Название</h1>
<div class="_56wku">

<form class="_3bqd5">
<h2 class="_9qbcz">Зарегистрируйтесь, чтобы смотреть фото и видео ваших друзей.</h2>
<span class="_1on88 _e616g">
<button class="_aj7mu _taytv _ki5uo _o0442">
<span class="coreSpriteFacebookIconInverted _a0z3x"></span>Войти через Facebook</button></span>
<div class="_r48rb">
<div class="_q1f8o"></div>
<div class="_dj70q">или</div>
<div class="_q1f8o"></div></div>
<div class="_djahe _i31zu">
<input type="text" class="_kp5f7 _qy55y" aria-describedby="" aria-label="Эл. адрес" aria-required="true" autocapitalize="off" autocorrect="off" name="email" placeholder="Эл. адрес" value=""></div>
<div class="_djahe _i31zu">
<input type="text" class="_kp5f7 _qy55y" aria-describedby="" aria-label="Имя и фамилия" aria-required="false" autocapitalize="sentences" autocorrect="off" name="fullName" placeholder="Имя и фамилия" value=""></div>
<div class="_djahe _i31zu">
<input type="text" class="_kp5f7 _qy55y" aria-describedby="" aria-label="Имя пользователя" aria-required="true" autocapitalize="off" autocorrect="off" maxlength="30" name="username" placeholder="Имя пользователя" value=""></div>
<div class="_djahe _i31zu">
<input type="password" class="_kp5f7 _qy55y" aria-describedby="" aria-label="Пароль" aria-required="true" autocapitalize="off" autocorrect="off" name="password" placeholder="Пароль" value=""></div>
<div><span class="_1on88 _e616g">
<button class="_aj7mu _taytv _ki5uo _o0442">Регистрация</button></span></div>
<p class="_rpioj">Регистрируясь, вы соглашаетесь с нашими <a class="_m4qul" href="/legal/terms/" target="_blank">Условиями</a> и
<a class="_m4qul" href="/legal/privacy/" target="_blank">Политикой конфиденциальности</a>.</p>
</form>

</div></div>

Также форма входа

Код:

<div class="_nvyyp" style="display: block;">
<h1 class="_du7bh _soakw coreSpriteLoggedOutWordmark">Название</h1>
<div class="_uikn3">

<form class="_rwf8p">
<div class="_ccek6 _i31zu">
<input type="text" class="_kp5f7 _qy55y" aria-describedby="" aria-label="Имя пользователя" aria-required="true" autocapitalize="off" autocorrect="off" maxlength="30" name="username" placeholder="Имя пользователя" value=""></div>
<div class="_ccek6 _i31zu">
<input type="password" class="_kp5f7 _qy55y" aria-describedby="" aria-label="Пароль" aria-required="true" autocapitalize="off" autocorrect="off" name="password" placeholder="Пароль" value="">
<div class="_j4ox0"><a class="_19gtn" href="/accounts/password/reset/">Забыли?</a></div></div><span class="_rz1lq _e616g">
<button class="_aj7mu _taytv _ki5uo _o0442">Войти</button></span>
</form>

</div></div>

И кнопка

Код:

<div class="_nvyyp" style="display: none;"><p class="_dyp7q">Уже есть аккаунт?<a class="_fcn8k" class="pseudolink" href="javascript:;">Войти</a></p></div>

По умолчанию стоит блок войти
как сделать чтоб при начатии на кнопку "зарегистрироваться"
выводился блок регистрации???

tm.weBreath · 20 Авг 2016

так используйте show \ hide и все

Sarkerdo · 20 Авг 2016

tm.weBreath написал(а):
так используйте show \ hide и все

Можно наглядный пример? если не сложно
show \ hide он скрыват и отображает
но не меняет кнопку к примеру "вход" на "регистрация"

DeLighter · 20 Авг 2016

Пример кода на jQuery для одной кнопки. Селекторы надо поменять на свои.

Код:

$("button_selector").on("click", function(){
    $("old_div_selector").hide();        // Скрывает старый блок
    $("new_div_selector").show();        // Показывает новый блок
    $(this).text("Здесь текст");        // Меняет текст кнопки
});

romius · 20 Авг 2016

Не забудьте изначально скрыть один блок - display:none. Вот когда-то делал Для просмотра ссылки Войди или Зарегистрируйся
доработать немного придется.

redfoxius · 21 Авг 2016

Пишу под jQuery, под чистый JS могу адаптировать при необходимости.
Идею уже озвучили - один блок display:none

Для простоты реализации лучше играться классами. Например, имеем следующие две формы:

Код:

        <div class="row frm-div">
            <div class="col-md-4 col-md-offset-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">User login</h3>
                    </div>
                    <div class="panel-body">
                        <form role="form" id="form-login">
                            <fieldset>
                                <div class="form-group">
                                    <input class="form-control" placeholder="E-mail" name="email" type="email" required autofocus>
                                </div>
                                <div class="form-group">
                                    <input class="form-control" placeholder="Password" name="password" type="password" required value="">
                                </div>
                                <!-- Change this to a button or input when using this as a form -->
                                <button id="login-btn" type="button" class="btn btn-success btn-block">Login</button>
                                <p>New Member? <span class="frm-toggle">Sign up</span></p>
                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="rowfrm-div frm-hidden">
            <div class="col-md-4 col-md-offset-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Register new user</h3>
                    </div>
                    <div class="panel-body">
                        <form role="form" id="form-register">
                            <fieldset>
                                <div class="form-group">
                                    <input class="form-control" placeholder="First name" name="firstname" type="text" required autofocus>
                                </div>
                                <div class="form-group">
                                    <input class="form-control" placeholder="Last name" name="lastname" type="text" required>
                                </div>
                                <div class="form-group">
                                    <input class="form-control" placeholder="Login" name="login" type="text" required>
                                </div>
                                <div class="form-group">
                                    <input class="form-control" placeholder="E-mail" name="email" type="email" required>
                                </div>
                                <div class="form-group">
                                    <input class="form-control" placeholder="Password" name="password" type="password" value="" id="frm-reg-pass" required>
                                </div>
                                <div class="form-group">
                                    <input class="form-control" placeholder="Password Verify" name="passwordVerify" type="password" value="" id="frm-reg-verify" title="Password missmatch" required>
                                </div>
                                <!-- Change this to a button or input when using this as a form -->
                                <button id="register-btn" type="button" class="btn btn-success btn-block">Create user</button>
                                <p>Already have account? <span class="frm-toggle">Sign in</span></p>
                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>
        </div>

Каждая в своем div'е. Прописываем обоим класс frm-div (для того, чтобы быстро и однозначно выбрать оба дива для работы) и одному из них (диву с формой регистрации) класс frm-hidden со следующим css кодом:

Код:

.frm-hidden {
    display: none;
}

И размещаем на каждой форме по кликабельному элементу с классом frm-toggle. И добавляем на страницу следующий JS код:

Код:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
jQuery(".frm-toggle").click(function() {
    jQuery(".frm-div").toggleClass("frm-hidden");
});
<script>

Sarkerdo · 22 Авг 2016

Решил вопрос так:
Но как сделать теперь в обратном порядке?
По умолчанию стоит форма авторизации, при нажатии на ссылку зарегистрироваться, блок с 
перекрывает блок авторизации, но вот в обратном порядке если нажать - не хочет

Код:

<!-- Блок с формой 1 -->
<div id="page1" class="page">
    <form id="form1">
<label>Укажите email:</label><br>
<input type="text" placeholder="Email">
<a id="next" href="#">Далее</a>
    </form>
</div>
<!-- Блок с формой 2 -->
<div id="page2" class="page hide">
    <form id="form2">
<label>Укажите имя:</label><br>
<input type="text" placeholder="Имя">
<a href="#">Отправить</a>
    </form>
</div>

Код:

<script>
    $(function() {
            jQuery('#next').click(function() {
                    jQuery('#page1').slideUp(1000);
                    jQuery('#page2').slideDown(1000);
            });
    });
</script>

Код:

.hide { display: none; }

Код:

<p class="стиль">Еще нет аккаунта? <a id="next" class="стиль" href="javascript:;">Зарегистрируйтесь</a></p>

DeLighter · 22 Авг 2016

Попробуйте slideUp и slideDown заменить на toggle

redfoxius · 22 Авг 2016

Sarkerdo написал(а):
Но как сделать теперь в обратном порядке?

Сделайте через Для просмотра ссылки Войди или Зарегистрируйся

Код:

jQuery(".page').slideToggle(1000);

f483796 · 25 Авг 2016

Проще всего, конечно hide-ом и show-ом скрывать/показывать, а изначально оба блока выводить, конечно, только один скрывать по умолчанию

Смена блоков при помощи js

Sarkerdo

ＥＴＯ　ＦＩＡＳＫＯ

tm.weBreath

Постоялец

Sarkerdo

ＥＴＯ　ＦＩＡＳＫＯ

DeLighter

Постоялец

romius

Создатель

redfoxius

Создатель

Sarkerdo

ＥＴＯ　ＦＩＡＳＫＯ

DeLighter

Постоялец

redfoxius

Создатель

f483796

Постоялец

Смена блоков при помощи js

ＥＴＯ ＦＩＡＳＫＯ

Постоялец

ＥＴＯ ＦＩＡＳＫＯ

Постоялец

Создатель

Создатель

ＥＴＯ ＦＩＡＳＫＯ

Постоялец

Создатель

Постоялец

ＥＴＯ　ＦＩＡＳＫＯ

ＥＴＯ　ＦＩＡＳＫＯ

ＥＴＯ　ＦＩＡＳＫＯ