如何正确进行引导选项卡替换？答案

【问题标题】：How to correctly do bootstrap tab replacement?如何正确进行引导选项卡替换？
【发布时间】：2015-05-18 11:40:37
【问题描述】：

我有一个三个选项卡，每个选项卡都由一个表单组成，当我单击登录选项卡时，我将使用 animate.css 和 jquery 将其替换为忘记密码的选项卡，如 jsfiddle 中指定的那样

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

我希望在单击“注册”选项卡时隐藏“登录/忘记密码”选项卡的内容。

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

【问题讨论】：

添加代码$('.register-form-header').on('click', function (e) { e.preventDefault(); $('#login-form').hide(); $('#forgot-password-tab').hide(); });
@vamsiampolu 当您第一次单击忘记密码时它可以工作，当我单击它时它会显示回登录链接，但是当我再次单击忘记密码链接时它无法显示忘记密码选项卡...正如我在 jsfiddle 中看到的那样。

标签： javascript jquery css twitter-bootstrap animate.css

【解决方案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

【讨论】：