我创建了一个使用javascript的自定义标签，允许我在标签之间进行选择。但是在提交或刷新页面时，我无法保持当前选项卡处于打开状态。我的JavaScript代码只允许我在标签之间切换。我还尝试为选项卡创建本地存储，但似乎不起作用。有解决方案吗？
<div class=" tab-pan row justify-content-center">
<div class="col-md-8">
<h1 class="" style="font-size:36px; color:#333; text-align:center; line-height: 1.25em; ">Sign In To Your Account!</h1>
<ul class="tab-login">
<li rel="vouchpanel3" class="active">student</li>
<li rel="vouchpanel4">teacher</li>
</ul>
<div id="vouchpanel3" class="pan active">
<form method="POST" action="{{ route('customer.login') }}" style="margin-top:8%;">
@csrf
<div class="form-group row">
<div class="col-md-12">
<input id="email" style="height:4rem;font-size:16px;font-weight:400" type="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}" placeholder="Email" required autofocus>
@if ($errors->has('email'))
<span class="invalid-feedback">
<strong>{{ $errors->first('email') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group row">
{{-- <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label> --}}
<div class="col-md-12">
<input id="password" style="height:4rem; font-size:16px;font-weight:400" type="password" placeholder="Password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" required>
@if ($errors->has('password'))
<span class="invalid-feedback">
<strong>{{ $errors->first('password') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group row">
<div class="col-md-12">
<a class="btn btn-link" style="font-size:1.2rem; margin-left:-1%;" href="{{ route('customer.password.request') }}">
{{ __('Forgot Your Password?') }}
</a>
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-12">
<button type="submit" class="loginandregister" style="width:100%; height:3rem; font-size:18px; padding:2px 0px 2px 0;">
Sign In
</button>
</div>
</div>
</form>
</div>
<script type="text/javascript">
// this code is switching from tab to tab
// im in the class tab-panels > ul tab-vouch > grabing the li
$('.tab-pan .tab-login li').on('click', function(){
var $panels = $(this).closest('.tab-pan');
$panels.find('.tab-login li.active').removeClass('active');
$(this).addClass('active');
var loginpanelshow = $(this).attr('rel');
$('.tab-pan .pan.active').stop().slideUp(300, function(){
$(this).removeClass('active');
$('#'+ loginpanelshow).slideDown(300, function(){
$(this).addClass('active');
});
});
// this is the code that i attempted to use local storage to save on refresh
var relAtt = $(this).attr('rel');
localStorage.setItem("current_tab", relAtt);
console.log(relAtt);
$(document).ready(function(){
var current_tab = localStorage.getItem("current_tab");
var element = $(".tab-login li").find("[rel="+current_tab+"]").addClass('active');
})
});
</script>
css
<style>
body{
background-color: white;
}
.tab-login{
width: 100%;
display: grid;
grid-template-columns: 50% 50%;
list-style-type: none;
padding: 0;
margin: 0;
}
.tab-login li{
text-align: center;
line-height: 3em;
font-size: 20px;
font-weight: 400;
text-transform: uppercase;
list-style: none;
cursor: pointer;
}
.tab-pan ul li.active{
border-bottom: solid #CA3F3F;
border-width: 0px 0 3px ;
padding-top: 1px;
padding-bottom: 3px;
}
.tab-pan ul li{
border-bottom: solid #d9d9d9;
border-width: 0px 0 3px ;
padding-top: 1px;
padding-bottom: 3px;
}
.tab-pan .pan{
display: none;
}
.tab-pan .pan.active{
display: block;
}
</style>
答案 0 :(得分：2)
这里的问题是您的选择器找不到正确的元素。因此，从该单击中，我进入了DOM以获得其父级，然后基于current_tab找到了rel。试试这个：
JSfiddle：http://jsfiddle.net/gzhnrpj7/2/
HTML：
<div class=" tab-pan row justify-content-center">
<ul class="tab-login">
<li rel="vouchpanel3" class="vouchpanel3 active">student</li>
<li rel="vouchpanel4" class="vouchpanel4">teacher</li>
</ul>
</div>
CSS：
body{
background-color: white;
}
.tab-login{
width: 100%;
display: grid;
grid-template-columns: 50% 50%;
list-style-type: none;
padding: 0;
margin: 0;
}
.tab-login li{
text-align: center;
line-height: 3em;
font-size: 20px;
font-weight: 400;
text-transform: uppercase;
list-style: none;
cursor: pointer;
}
.tab-pan ul li.active{
border-bottom: solid #CA3F3F;
border-width: 0px 0 3px ;
padding-top: 1px;
padding-bottom: 3px;
}
.tab-pan ul li{
border-bottom: solid #d9d9d9;
border-width: 0px 0 3px ;
padding-top: 1px;
padding-bottom: 3px;
}
.tab-pan .pan{
display: none;
}
.tab-pan .pan.active{
display: block;
}
JS：
$(document).ready(function() {
$('.tab-login li').removeClass('active');
var current_tab = localStorage.getItem("current_tab"),
element = $(".tab-login li")
.parent('ul')
.find("[rel="+current_tab+"]")
.addClass('active');
// this code is switching from tab to tab
// im in the class tab-panels > ul tab-vouch > grabing the li
$('.tab-pan .tab-login li').on('click', function() {
var $panels = $(this).closest('.tab-pan');
$panels.find('.tab-login li.active').removeClass('active');
$(this).addClass('active');
var loginpanelshow = $(this).attr('rel');
$('.tab-pan .pan.active').stop().slideUp(300, function(){
$(this).removeClass('active');
$('#'+ loginpanelshow).slideDown(300, function(){
$(this).addClass('active');
});
});
// this is the code that i attempted to use local storage to save on refresh
var relAtt = $(this).attr('rel');
localStorage.setItem("current_tab", relAtt);
console.log(relAtt);
});
});
单击小提琴，将加载该部分。要对此进行测试，您可以打开控制台，转到“应用程序”选项卡，然后单击“本地存储”。当您单击一个选项卡并单击刷新图标进行本地存储时，您会注意到该值从vouchpanel3更改为vouchpanel4，反之亦然。单击选项卡后，只需再次运行jsfiddle即可进行进一步测试。