表单提交应该保持在同一个选项卡上 [英] Form submit should stay on the same tab
本文介绍了表单提交应该保持在同一个选项卡上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
通过单击按钮提交表单时，应该打开页面重新加载相同的选项卡，但它将转到默认选项卡。我尝试了本地存储，但它不起作用。我的代码出了什么问题？
[现在正在工作。
jQuery：
$（document） .ready（function（）{
$（'a [data-toggle =tab]'）。on（'show.bs.tab'，function（e）{
localStorage.setItem （activeTab），$（b.b），$ {
$（'＃myTab a [href =''+ activeTab +']'）。tab（'show'）;
}
$（'。tabs .tab-links a'）。on（'click'，function（e）{
var currentAttrValue = jQuery（this）.attr（'href'）;
//显示/隐藏标签
jQuery '.tabs'+ currentAttrValue）.siblings（）。slideUp（400）;
jQuery（'。tabs'+ currentAttrValue）.delay（400）.slideDown（400）;
//更改/删除当前选项卡激活
jQuery（this）.parent（'li'）。addClass（'active'）。siblings（）。removeClass（'active'）;
e.preventDefault（）;
}）;
$（'＃btnLock'）。click（function（）{
$（'＃lockForm'）。submit（）;
}）;
}）;
HTML：
< div class =tabsalign =center>
< ul class =tab-links>
< li class =active>< a data-toggle =tabhref =＃tabs-1>注册< / a>< / li>
< li>< a data-toggle =tabhref =＃tabs-2>锁定< / a>< / li>
< / ul>
< div class =tab-content>
< div id =tabs-1class =tab active>
< form：form ....> < div class =plinput>< a id =btnRegisterclass =abutton>注册< / a>< / div>
< / form：form>
< / div>
< div id =tabs-2class =tab>
< form：form ...> < div class =plinput>< a id =btnLockclass =abutton> Lock< / a>< / div>
< / form：form>
< / div>
< / div>
解决方案
夫妇的事情要解决。 .tab（'show'）应该是 .show（'tab'）
我将 show.bs.tab 更改为点击。
我让两个div display：none 开始。
最后，我放了一个onload函数来显示应显示的div。
< head>
< script src =https://code.jquery.com/jquery-2.2.3.min.jsintegrity =crossorigin =anonymous>< / script>
< / head>
< body>
< script> $（'click'，function（e））{
（document）.ready（function（）{
$（'a [data-toggle =tab]'）。 localStorage.setItem（'activeTab'，$（e.target）.attr（'href'））;
}）;
var activeTab = localStorage.getItem（'activeTab'）;
if（activeTab）{
$（'＃myTab a [href =''+ activeTab +']'）。show（'tab'）;
} $ （'click'，function（e）{
var currentAttrValue = jQuery（this）.attr（'href'）;
$ b $（'。tabs .tab-links a'）。
//显示/隐藏标签
jQuery（'。tabs'+ currentAttrValue）.siblings（）。slideUp（400）;
jQuery（'。tabs'+ currentAttrValue）.delay（400 ）.slideDown（400）;
//更改/删除当前选项卡以激活
jQuery（this）.parent（'li'）。addClass（'active'）。siblings（）。removeClass（' '）;
e.preventDefault（）;
}）;
$（'＃btnLock'）。click（function（）{
$（'＃lockForm'）。submit（）;
}）;
$（window）.on（'load'，function（）{
$（localStorage.getItem（'activeTab '））。显示（）;
}）;
}）;
< / script>
< div class =tabsalign =center>
< ul class =tab-links>
< li class =active>< a data-toggle =tabhref =＃tabs-1>注册< / a>< / li>
< li>< a data-toggle =tabhref =＃tabs-2>锁定< / a>< / li>
< / ul>
< div class =tab-content>
< div id =tabs-1class =tab activestyle =border：1px solid blue; display：none;>
< form：form>
< div class =plinput>< a id =btnRegisterclass =abutton>注册< / a>< / div>
< / form：form>
< / div>
< div id =tabs-2class =tabstyle =border：1px solid red; display：none;>
< form：form>
< div class =plinput>< a id =btnLockclass =abutton> Lock< / a>< / div>
< / form：form>
< / div>
< / div>
< / div>
< / body>
< a href =../ login.aspx>其他地方< / a>
On submitting the form by clicking a button, upon page reload same tab should be opened, but it is going to default tab. I have tried local storage but it doesn't work. What is wrong with my code?
[This is working now. See my answer below]
jQuery:
$(document).ready(function() {
$('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
localStorage.setItem('activeTab', $(e.target).attr('href'));
});
var activeTab = localStorage.getItem('activeTab');
if(activeTab){
$('#myTab a[href="' + activeTab + '"]').tab('show');
}
$('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).siblings().slideUp(400);
jQuery('.tabs ' + currentAttrValue).delay(400).slideDown(400);
// Change/remove current tab to active
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
$('#btnLock').click(function() {
$('#lockForm').submit();
});
});
HTML:
<div class="tabs" align="center">
<ul class="tab-links">
<li class="active"><a data-toggle="tab" href="#tabs-1">Register</a></li>
<li><a data-toggle="tab" href="#tabs-2">Lock</a></li>
</ul>
<div class="tab-content">
<div id="tabs-1" class="tab active">
<form:form....> <div class="plinput"><a id="btnRegister" class="abutton">Register</a></div>
</form:form>
</div>
<div id="tabs-2" class="tab">
<form:form...> <div class="plinput"><a id="btnLock" class="abutton">Lock</a></div>
</form:form>
</div>
</div>
解决方案
Couple things to fix. .tab('show') should be .show('tab')
I changed the show.bs.tab to click.
I made both divs display:none to start.
And finally, I put an onload function to show the div that should be shown.
<head>
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="" crossorigin="anonymous"></script>
</head>
<body>
<script>
$(document).ready(function () {
$('a[data-toggle="tab"]').on('click', function (e) {
localStorage.setItem('activeTab', $(e.target).attr('href'));
});
var activeTab = localStorage.getItem('activeTab');
if (activeTab) {
$('#myTab a[href="' + activeTab + '"]').show('tab');
}
$('.tabs .tab-links a').on('click', function (e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).siblings().slideUp(400);
jQuery('.tabs ' + currentAttrValue).delay(400).slideDown(400);
// Change/remove current tab to active
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
$('#btnLock').click(function () {
$('#lockForm').submit();
});
$(window).on('load',function () {
$(localStorage.getItem('activeTab')).show();
});
});
</script>
<div class="tabs" align="center">
<ul class="tab-links">
<li class="active"><a data-toggle="tab" href="#tabs-1">Register</a></li>
<li><a data-toggle="tab" href="#tabs-2">Lock</a></li>
</ul>
<div class="tab-content">
<div id="tabs-1" class="tab active" style="border: 1px solid blue;display:none;">
<form:form>
<div class="plinput"><a id="btnRegister" class="abutton">Register</a></div>
</form:form>
</div>
<div id="tabs-2" class="tab" style="border: 1px solid red;display:none;">
<form:form>
<div class="plinput"><a id="btnLock" class="abutton">Lock</a></div>
</form:form>
</div>
</div>
</div>
</body>
<a href="../login.aspx">Somewhere Else</a>
这篇关于表单提交应该保持在同一个选项卡上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
