0
当我点击登录按钮页面重新加载，因此它显示隐藏的内容，我写在jquery中。所以我写了防止默认功能，即使它不工作。那么你能帮我解决这个问题吗？如何防止页面重新加载
$('.tab a').on('click', function (e) {
e.preventDefault();
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
});
$(document).ready(function() {
$("#otp").hide();
$("#setpswd").hide();
$(".cancel").hide();
$("#submit").hide();
$(".login").show();
$(".forgot").click(function (evt) {
evt.preventDefault();
return false();
$("#otp").show();
$("#setpswd").show();
$("#pswd").hide();
$(".cancel").show();
$(".forgot").hide();
$("#submit").show();
$(".login").hide();
});
});
.form {
border-top: 4px solid #0689b2;
background: #45bacc;
padding: 30px;
max-width: 400px;
margin: 40px auto;
border-radius: 4px;
/*box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);*/
}
.box-shadow{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
padding: 7%;
background: rgba(6, 137, 178, 0.68);
}
.tab-group {
list-style: none;
padding: 0;
margin: 0 0 40px 0;
}
.tab-group:after {
content: "";
display: table;
clear: both;
}
.tab-group li a {
display: block;
text-decoration: none;
padding: 5px;
background: #0689b2;
color: #ffffff;
font-size: 20px;
float: left;
width: 50%;
text-align: center;
cursor: pointer;
/* -webkit-transition: .5s ease;
*/transition: .5s ease;
}
.tab-content > #signup:last-child {
display: none;
}
.tab-group .active a, .tab-group .active a:hover{
background: #ffffff;
color: #0689b2;
}
input, textarea {
display: block;
width: 100%;
/* height: 100%;*/
padding: 6px 0px 6px 9px;
background-image: none;
border-radius: 0;
}
input:focus, textarea:focus {
outline: 0;
}
textarea {
border: 2px solid #a0b3b0;
resize: vertical;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color:#0689b2;
position:relative;
left:10px;
}
::-moz-placeholder { /* Firefox 19+ */
color:#0689b2;
position:relative;
left:10px;
}
:-ms-input-placeholder { /* IE 10+ */
color:#0689b2;
position:relative;
left:10px;
}
:-moz-placeholder { /* Firefox 18- */
color: #fff;
position:relative;
left:10px;
}
.field-wrap {
position: relative;
margin-bottom: 25px;
}
.choose-option h4{
display:inline;
color: #fff;
font-weight:800;
}
.choose-option {
margin:0 0 25px 0;
}
.choose-option .radio-inline{
color: #fff;
}
.radio-inline input[type=radio] {
margin: 4px 0 0 34%;
}
.top-row:after {
content: "";
display: table;
clear: both;
}
.top-row > div {
float: left;
width: 48%;
margin-right: 4%;
}
.top-row > div:last-child {
margin: 0;
}
.login-btn {
border: 0;
outline: none;
border-radius: 0;
padding: 5px;
font-size: 2rem;
text-transform: uppercase;
letter-spacing: .1em;
background: #0689b2;
color: #FFF;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
-webkit-appearance: none;
}
.login-btn:hover, .login-btn:focus {
background: #f5f5f5;
color: #0689b2;
}
.button-block {
/*display: block;*/
width: 100%;
}
.forgot{
margin: -15px 0px 5px 0;
text-align: right;
}
.forgot a, .cancel a{
color:#fff;
}
.cancel{
text-align: center;
margin: 3% 0 0 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form">
<div class="box-shadow">
<ul class="tab-group">
<li class="tab active"><a href="#login">Log In</a></li>
<li class="tab"><a href="#signup">Sign Up</a></li>
</ul>
<div class="tab-content">
<div id="login">
<form action="#" method="post">
<div class="field-wrap">
<input type="email" placeholder=" Email Address" />
</div>
<div class="field-wrap" id="pswd">
<input type="password" placeholder=" Password" />
</div>
<p class="forgot"><a href="#">Forgot Password?</a></p>
<div class="field-wrap" id="otp">
<input type="text" placeholder="Enter OTP" />
</div>
<div class="field-wrap" id="setpswd">
<input type="password" placeholder="Set Password" />
</div>
<input type="submit" class="login-btn button-block" id="submit" value="Submit">
<p class="cancel"><a href="<?php echo base_url(); ?>index.php/welcome/login">Cancel</a></p>
<input type="submit" class="login-btn button-block login" value="Login">
</form>
</div>
<div id="signup">
<form action="#" method="post">
<div class="top-row">
<div class="field-wrap">
<input type="text" placeholder="First Name"/>
</div>
<div class="field-wrap">
<input type="text" placeholder="Last Name" />
</div>
</div>
<div class="field-wrap">
<input type="email"placeholder="Email" />
</div>
<div class="field-wrap">
<input type="text"placeholder="Mobile Number"/>
</div>
<div class="choose-option">
<h4>I am<i class="fa fa-angle-right"></i></h4>
<label class="radio-inline">
<input type="radio" name="optradio">Buyer
</label>
<label class="radio-inline">
<input type="radio" name="optradio">Supplier
</label>
</div>
<div class="field-wrap">
<input type="password"placeholder="Password"/>
</div>
<div class="field-wrap">
<input type="password"placeholder="Re-enter Password"/>
</div>
<input type="submit" class="login-btn button-block" value="Sign Up">
</form>
</div>
</div>
</div>
</div>
谢谢您宝贵的建议。但是，它不适用于班级取消 – Learner