[英]Bootstrap tabs go to specific tab on same page after form submit
I have looked at many different threads on here about this issue, but none exactly answered my question.我在这里查看了许多关于此问题的不同主题,但没有一个完全回答我的问题。
I have a form, on tab 2. Once I submit that form, the page reloads and I'm back at tab 1. I need it to go back to tab 2 after the form submits.我有一个表单,位于选项卡 2 上。提交该表单后,页面将重新加载,然后返回选项卡 1。我需要在表单提交后返回选项卡 2。
This jsfiddle shows how you can use a link to jump from tab to tab on the same page, but how would I implement it into a form?这个 jsfiddle 展示了如何使用链接在同一页面上从一个选项卡跳转到另一个选项卡,但我如何将它实现到表单中? http://jsfiddle.net/technotarek/3hJ46/
http://jsfiddle.net/technotarek/3hJ46/
It uses this function:它使用这个函数:
$("a[data-tab-destination]").on('click', function() {
var tab = $(this).attr('data-tab-destination');
$("#"+tab).click();
});
Another popular link: Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink另一个流行的链接: Twitter Bootstrap 标签:转到页面重新加载或超链接上的特定标签
But the solutions from that link are only if your going to another page, and do not work on the same page.但是该链接的解决方案仅适用于您转到另一个页面的情况,并且在同一页面上不起作用。 And I still wouldn't know how to implement that into a form.
我仍然不知道如何将其实现为表单。
I tried我试过
<form action"javascript:function()">...</form>
and had a function that accomplished what I needed, but javascript doesn't work in the action attribute all that well.并且有一个函数可以完成我需要的功能,但是 javascript 在 action 属性中并不能很好地工作。
How can I achieve this?我怎样才能做到这一点?
EDIT: After going through the bootstrap documentation, I still have not found a solution to my problem.编辑:通过引导程序文档后,我仍然没有找到解决我的问题的方法。 To restate, I need to go to a tab that is not the primary or active tab after you submit a form.
重申一下,在您提交表单后,我需要转到一个不是主要或活动选项卡的选项卡。
I finally figured it out on my own.我终于自己想通了。 Still mad at the lack of help I received.
仍然为我没有得到帮助而生气。 For the form I did this:
对于我这样做的表格:
<form action="profile.php#editinfo" method="post">
...
</form>
And then I added a script which only does the job because it is the last tab, but it could be revised:然后我添加了一个脚本,它只能完成这项工作,因为它是最后一个选项卡,但可以修改:
<script>
var url = window.location.href;
var hash = url.substring(url.indexOf("#"));
if (hash == "#editinfo")
{
$(function(){
$('#tabmenu a:last').tab('show');
});
}
</script>
I would've it rather went to the tab with the id #editinfo, but when changing this我宁愿转到带有 id #editinfo 的选项卡,但是在更改此选项时
$('#tabmenu a:last').tab('show');
to this对此
$('#tabmenu a:[href="#editinfo"]').tab('show');
It would no longer work.它将不再起作用。 Just messed around and read the documentation multiple times.
只是乱搞并多次阅读文档。
I had a similar problem when submitting three different forms from three different bootstrap tabs.从三个不同的引导程序选项卡提交三种不同的表单时,我遇到了类似的问题。 By default it was redirecting me to the primary/active tab.
默认情况下,它将我重定向到主/活动选项卡。 I solved it by sending a string with redirecting URL and checking the string in the view file, as shown below.
我通过发送一个带有重定向 URL 的字符串并检查视图文件中的字符串来解决它,如下所示。
$type
is the string passed to view file after submitting form. $type
是提交表单后传递给视图文件的字符串。
<script>
$( function() {
<?php if($type == 'string1')
{
?>
$('.tab1').click();
<?php
}
if($type == 'string2')
{
?>
$('.tab2').click();
<?php
}
if($type == 'string3'){
?>
$('.tab3').click();
<?php
}
?>
});
</script>
.tab1 .tab2 .tab3 are class for anchor tags. .tab1 .tab2 .tab3 是锚标签的类。
<ul class="nav nav-tabs">
<li role="presentation" class="nav-one active"><a href="#tab_1" aria-controls="tab_1" class="tab1" role="tab" data-toggle="tab">1st tab</a></li>
<li role="presentation" class="nav-two"><a href="#tab_2" aria-controls="tab_2" class="tab2" role="tab" data-toggle="tab">2nd tab</a></li>
<li role="presentation" class="nav-three"><a href="#tab_3" aria-controls="tab_3" class="tab3" role="tab" data-toggle="tab">3rd tab</a></li>
</ul>
It is not exactly what you want, but someone with a problem similar to mine can benefit from it.这并不完全是您想要的,但是与我有类似问题的人可以从中受益。
You need to change the "data-tab-destination" on current tab, try this working demo
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.