我的一个元素的登录/注册 html 页面有问题:
-隐藏由于某些原因未应用的 CSS 类
第一个是你可以看到 .hide(display:none;) 由于某种原因没有生效，这使得登录表单出现在主容器的正下方。
-JQuery addClass()/removeClass() 不工作。
第二个问题是我的 jquery 函数显示登录表单并在单击注册时隐藏注册表不起作用，我使用 addClass(.hide) 和 removeClass(.hide) 在注册和登录表单之间交替我认为这是真正的上帝行为的点击，。
这是我的代码:
$('#showLoginForm').click(function(e){
e.preventDefault();
//alert('clicked register');
$('.auth_register_container').addClass('hide');
$('.auth_login_container').removeClass('hide');
});*{box-sizing:border-box; margin:0; padding:0;}
a{text-decoration:none;}
::placeholder {color: rgba(0,0,0,0.3);}
.input:focus{border-color: none;-webkit-box-shadow: none; box-shadow: none; outline: none;}
.hide{display:none;}
.pointer{cursor:pointer;}
.auth_maincontainer{width:38%; height:77%; position:absolute; top:50%; left:50%; z-index:999999; left:50%; background-color:white; transform:translate(-50%, -50%); top:50%; border:1px solid rgba(0,0,0,0.2); box-shadow:4px 4px 4px rgba(0,0,0,0.3);}
.auth_register_container{width:100%; display:flex; flex-direction:column; align-items:center; background-color:white; padding-bottom:25px; height:100%; border-radius:20px;}
.auth_login_container{width:100%; display:flex; flex-direction:column; align-items:center; background-color:white; padding-bottom:25px; height:100%; border-radius:20px;}
.auth_title{margin-bottom:25px; width:100%; height:12%; display:flex; display:flex; justify-content:center; align-items:center; font-size:25px; color:rgba(0,0,0,0.8); font-weight:600;}
.auth_form_container{width:70%; height:45px; display:flex; position:relative;}
.auth_form_submit{width:45px; height:100%; border-left:2px solid #2A3F54; border-top:2px solid #2A3F54; border-bottom:2px solid #2A3F54; display:flex; justify-content:center; align-items:center;}
.auth_form_icon{font-size:27px; color:#2A3F54;}
.auth_form_input{border:2px solid #2A3F54; font-size:19px; color:rgba(0,0,0,0.7); width:90%; height:100%; background-color:transparent; padding:8px;}
.auth_error_alert{display:none; color:#C1392B; font-size:27px; position:absolute; top:50%; transform:translateY(-50%); left:-40px;}
.auth_error_container{width:70%; height:36px; display:flex; align-items:center; visibility:hidden;}
.fa-asterisk{color:#C1392B; font-size:6px; margin-right:6px;}
.auth_error_text{color:#C1392B; font-size:13px; font-weight:500;}
.auth_remember_container{width:70%; height:30px; display:flex; align-items:center; margin-top:auto;}
.auth_remember_input{width:13px; height:13px; margin-right:5px;}
.auth_remember_text{font-size:13px; color:#333333; font-weight:400;}
.auth_registeradv_container{width:70%; height:30px; display:flex; align-items:center; margin-bottom:10px; margin-top:3px;}
.auth_registeradv_text{font-size:15px; color:rgba(0,0,0,0.9); margin-right:3px;}
.auth_registeradv_show{margin-left:7px; font-weight:900; color:rgba(0,0,0,0.9); font-size:14px;}
.fa-sign-in{font-size:15px; color:rgba(0,0,0,0.9); margin-right:3px;}
.auth_form_buttons_container{width:70%; height:45px; display:flex; justify-content:space-between; margin-top:auto;}
.auth_form_login_button{font-size:20px; padding:0px 50px; height:100%; background-color:#4D9A3A; color:white; font-weight:500; display:flex; justify-content:center; align-items:center;}
.auth_form_reset_button{font-size:20px; padding:0px 50px; height:100%; background-color:#C1392B; color:white; font-weight:00; display:flex; justify-content:center; align-items:center;}
.auth_pattern_container{width:100%; height:40vh; background-color:#0FBCF5; position:relative; background-color:white; background-image:url('images/back2.png'); positon:relative; background-size:contain;}
.auth_filter_color{width:100%; height:40vh; position:absolute; bottom:0px; left:0px; background-color:rgba(255,255,255,0.8);}
.auth_color_container{width:100%; height:60vh; background-color:#0FBCF5; positon:relative;}
.auth_gradient_color{width:100%; height:60vh; position:absolute; bottom:0px; left:0px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body style="display:flex; flex-direction:column; position:relative; font-family:Open Sans;">
<div class="auth_pattern_container" style="">
<div class="auth_filter_color" style=""></div>
</div>
<div class="auth_maincontainer" style="">
<div class="auth_register_container" style="">
<h1 class="auth_title" style="">REGISTRARSE</h1>
<div class="auth_form_container" style="">
<div class="auth_form_submit" style="">
<i class="auth_form_icon fa fa-user" style=""></i>
</div>
<input class="auth_form_input" type="text" class="input" placeholder="USUARIO" style="">
<i class="auth_error_alert fa fa-exclamation-triangle" style="" ></i>
</div>
<div class="auth_error_container" style="">
<i class="fa fa-asterisk" style=""></i>
<span class="auth_error_text" style="">El usuario no existe</span>
</div>
<div class="auth_form_container" style="">
<div class="auth_form_submit" style="">
<i class="auth_form_icon fa fa-envelope" style=""></i>
</div>
<input class="auth_form_input" type="email" class="input" placeholder="CORREO" style="">
<i class="auth_error_alert fa fa-exclamation-triangle" style="" ></i>
</div>
<div class="auth_error_container" style="">
<i class="fa fa-asterisk" style="color:#C1392B; font-size:6px; margin-right:6px;"></i>
<span class="auth_form_error_text" style="">El email no coincide</span>
</div>
<div class="auth_form_container" style="">
<div class="auth_form_submit" style="">
<i class="auth_form_icon fa fa-lock" style=""></i>
</div>
<input class="auth_form_input" type="password" class="input" placeholder="CONTRASEÑA" style="">
<i class="auth_error_alert fa fa-exclamation-triangle" style="" ></i>
</div>
<div class="auth_error_container" style="">
<i class="fa fa-asterisk" style=""></i>
<span class="auth_error_text" style="">La contraseña no es valida</span>
</div>
<div class="auth_remember_container" style="">
<input class="auth_remember_input" type="checkbox" checked="false" style="">
<span class="auth_remember_text" style="">Recuerdame</span>
</div>
<div class="auth_registeradv_container" style="">
<span class="auth_registeradv_text" style="">¿No tienes cuenta de usuario? </span>
<a id="showLoginForm" class="auth_registeradv_show" style="" href=""><i class="fa fa-sign-in" style=""></i>Registrate.</a>
</div>
<div class="auth_form_buttons_container" style="">
<div class="auth_form_login_button pointer" style="">INICIO</div>
<div class="auth_form_reset_button pointer" style="">RESET</div>
</div>
</div>
<div class="auth_login_container hide" style="">
<h1 class="auth_title" style="">INICIAR SESIÓN</h1>
<div class="auth_form_container" style="">
<div class="auth_form_submit" style="">
<i class="auth_form_icon fa fa-user" style=""></i>
</div>
<input class="auth_form_input" type="text" class="input" placeholder="USUARIO" style="">
<i class="auth_error_alert fa fa-exclamation-triangle" style="" ></i>
</div>
<div class="auth_error_container" style="">
<i class="fa fa-asterisk" style=""></i>
<span class="auth_error_text" style="">El usuario no existe</span>
</div>
<div class="auth_form_container" style="">
<div class="auth_form_submit" style="">
<i class="auth_form_icon fa fa-envelope" style=""></i>
</div>
<input class="auth_form_input" type="email" class="input" placeholder="CORREO" style="">
<i class="auth_error_alert fa fa-exclamation-triangle" style="" ></i>
</div>
<div class="auth_error_container" style="">
<i class="fa fa-asterisk" style="color:#C1392B; font-size:6px; margin-right:6px;"></i>
<span class="auth_form_error_text" style="">El email no coincide</span>
</div>
<div class="auth_form_container" style="">
<div class="auth_form_submit" style="">
<i class="auth_form_icon fa fa-lock" style=""></i>
</div>
<input class="auth_form_input" type="password" class="input" placeholder="CONTRASEÑA" style="">
<i class="auth_error_alert fa fa-exclamation-triangle" style="" ></i>
</div>
<div class="auth_error_container" style="">
<i class="fa fa-asterisk" style=""></i>
<span class="auth_error_text" style="">La contraseña no es valida</span>
</div>
<div class="auth_remember_container" style="">
<input class="auth_remember_input" type="checkbox" checked="false" style="">
<span class="auth_remember_text" style="">Recuerdame</span>
</div>
<div class="auth_registeradv_container" style="">
<span class="auth_registeradv_text" style="">¿No tienes cuenta de usuario? </span>
<a id="showLoginForm" class="auth_registeradv_show" style="" href=""><i class="fa fa-sign-in" style=""></i>Registrate.</a>
</div>
<div class="auth_form_buttons_container" style="">
<div class="auth_form_login_button pointer" style="">INICIO</div>
<div class="auth_form_reset_button pointer" style="">RESET</div>
</div>
</div>
</div>
<div class="auth_color_container" style=" ">
<div class="auth_gradient_color" style=""></div>
</div>
<script>
$(document).ready(function(){
$(".sidebar_entry_link_container").click(function(){
$('.sidebar_entry_link_container').removeClass('active_entry');
$(this).addClass('active_entry');
$(this).nextAll('.sidebar_entry_dropdown_container:first').slideToggle();
});
$(".navbar_menu_toggle").click(function(){
$('.sidebar_maincontainer').toggleClass('active_sidebar_maincontainer');
$('.body_maincontainer').toggleClass('active_body_maincontainer');
});
$('#showLoginForm').click(function(e){
e.preventDefault();
//alert('clicked register');
$('.auth_register_container').addClass('hide');
$('.auth_login_container').removeClass('hide');
});
});
</script>
</body>最佳答案
.hide 的 display: none 被 .auth_login_container 和 .auth_register_container 的 显示: flex 。
jQuery 的 addClass 和 removeClass 在没有这些重写样式的情况下工作正常。
如果将 .hide 样式移动到其他两个类的样式下方，应用程序将按预期工作。例如https://jsfiddle.net/xpvt214o/171674/
另一种技术是在 display: none 样式之后添加 !important，因此它会覆盖其他 display 样式。我知道 !important 有时会被滥用，但这似乎是一个合理的用例。
关于JQuery addClass() 不添加类和 CSS 类只应用内联，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49948616/