如何正确地进行 bootstrap 选项卡替换？

Question

我有三个选项卡，每个选项卡都包含一个表单，当我单击选项卡进行登录时，我使用 animate.css 和 jquery 将其替换为忘记密码的选项卡这个jsfiddle

现在，我添加了另一个选项卡，切换到非替换选项卡会加载先前加载选项卡下方的选项卡，如此处所示 jsfiddle。

我希望在单击“注册”选项卡时隐藏 Login/Forgot 密码选项卡的内容。

我尝试使用基于 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');
 }
});

Answer 1

我不知道这是不是好方法但是我解决了这个..

这是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

如何正确地进行 bootstrap 选项卡替换？

How to correctly do bootstrap tab replacement?

javascript

css

jquery

twitter-bootstrap

animate.css