Как правильно сделать замену вкладки начальной загрузки?

У меня есть три вкладки каждый из которых состоит из формы, когда я нажимаю на вкладке для входа, я заменить его с вкладкой для забыли пароль, используя animate.css и JQuery, как указано в этом jsfiddle Как правильно сделать замену вкладки начальной загрузки?

Теперь я есть еще одна вкладка, которую я добавил к этому, переход на вкладку без замены загружает вкладку ниже ранее загруженной вкладки, как показано здесь в этом jsfiddle.

Я хочу, чтобы содержимое вкладки Login/Forgot Password скрывалось при нажатии на вкладку «Регистр».

Я попытался решить эту проблему с помощью tab('show') и boolean на основе обработчика событий нажмите так:

window.isHazardousForRegister = false; 

$('.forgot-password-header').css('display', 'none'); 

$('#forgot-password').on('click', function(e) { 
    isHazardousForRegister = true; 
    e.preventDefault(); 

    $('#login-form') 
    .addClass('animated fadeOutLeft') 
    .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() { 
    $('.login-form-header').css('display', 'none'); 

    $('#login-form').css({ 
     'display': 'none', 
     'visibility': 'hidden' 
    }); 

    $('.forgot-password-header') 
     .css('display', 'block') 
     .addClass('active'); 

    $('#forgot-password-tab') 
     .removeClass('fadeOutLeft') 
     .addClass('animated fadeInRight') 
     .css({ 
     'display': 'block', 
     'visibility': 'visible' 
     }); 

    }); 
}); 

$('.back-to-login').on('click', function(e) { 
isHazardousForRegister = true 
e.preventDefault(); 

$('.forgot-password-header') 
    .css('display', 'none') 
    .removeClass('active'); 

$('#forgot-password-tab') 
    .removeClass('fadeInRight') 
    .addClass('fadeOutLeft') 
    .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() { 
    $('#forgot-password-tab').css({ 
     'display': 'none', 
     'visibility': 'hidden' 
    }); 
    $('.login-form-header') 
     .css('display', 'block') 
     .addClass('active'); 
    $('#login-form') 
     .removeClass('fadeOutLeft') 
     .addClass('fadeInRight') 
     .css({ 
     'display': 'block', 
     'visibility': 'visible' 
     }); 
    }); 
}); 

$('.register-form-header').on('click', function() { 
if (isHazardousForRegister) { 
    $('#forgot-password-header').removeClass('active').tab('hide'); 

    $('#forgot-password').css({ 
    'display': 'none', 
    'visibility': 'hidden' 
    }); 

    $('#login-form').css({ 
    'display': 'none', 
    'visibility': 'hidden' 
    }); 

    $('#login-form-header').removeClass('active').tab('hide'); 
    $(this).addClass('active').tab('show'); 
} 
});

источник

2015-05-18 vamsiampolu

Добавить код '$ ('. Register-form-header'). On ('click', function (e) { e.preventDefault(); $ ('# login-form'). Hide(); $ ('# forget-password-tab'). Hide(); }); ' – vamsikrishnamannem

@vamsiampolu, когда вы нажмете на забытый пароль для первого раза, когда он работает, и он отображает ссылку для входа в систему, когда я нажимаю на нее, она работает, но когда я снова нажимаю ссылку на забытый пароль, она не может отобразить вкладку забытого пароля. .. я видел в jsfiddle. – sheshadri

Я не знаю, что это хороший подход или нет, но я решить эту проблему ..

Вот Javascript

$('.forgot-password-header').css('display', 'none'); 
$('#forgot-password').on('click', function(e) { 
    e.preventDefault(); 
    $('#login-form') 
    .addClass('animated fadeOutLeft') 
    .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() { 
     $('.login-form-header') 
     .css('display', 'none') 
     .removeClass('active'); 
     $('#login-form').css('display', 'none'); 
     $('.forgot-password-header') 
     .css('display', 'block') 
     .addClass('active'); 

     $('#forgot-password-tab') 
     .addClass('animated fadeInRight') 
     .css('display', 'block'); 
    }); 

}); 

$('.back-to-login').on('click', function(e) { 
    e.preventDefault(); 
    $('.forgot-password-header') 
    .css('display', 'none') 
    .removeClass('active'); 
    $('#forgot-password-tab') 
    .removeClass('fadeInRight') 
    .addClass('fadeOutLeft') 
    .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() { 
     $('#forgot-password-tab').css('display', 'none'); 
     $('.login-form-header') 
     .css('display', 'block') 
     .addClass('active'); 
     $('#login-form') 
     .removeClass('fadeOutLeft') 
     .addClass('fadeInRight') 
     .css('display', 'block'); 
    }); 
}); 
$('.login-form-header').on('click', function(e) { 
    e.preventDefault(); 
    $('#login-form').show(); 
}); 
$('.forgot-password-header').on('click', function(e) { 
    e.preventDefault(); 
    $('#forgot-password-tab').show(); 
}); 
$('.register-form-header').on('click', function(e) { 
    e.preventDefault(); 
    $('#login-form').hide(); 
    $('#forgot-password-tab').hide(); 
});

Рабочий пример является here

источник

2015-05-18 12:11:23 vamsikrishnamannem

Как правильно сделать замену вкладки начальной загрузки?

ответ

Смежные вопросы