Question

我有一个三个标签，每个标签都包含一个表单，当我点击选项卡进行登录时，我将使用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');
 }
});

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 tab？

1 个答案: