表单提交后，Bootstrap 选项卡转到同一页面上的特定选项卡

Question

我在这里查看了许多关于此问题的不同主题，但没有一个完全回答我的问题。

我有一个表单，位于选项卡 2 上。提交该表单后，页面将重新加载，然后返回选项卡 1。我需要在表单提交后返回选项卡 2。

这个 jsfiddle 展示了如何使用链接在同一页面上从一个选项卡跳转到另一个选项卡，但我如何将它实现到表单中？ http://jsfiddle.net/technotarek/3hJ46/

它使用这个函数：

$("a[data-tab-destination]").on('click', function() {
        var tab = $(this).attr('data-tab-destination');
        $("#"+tab).click();
    });

另一个流行的链接： Twitter Bootstrap 标签：转到页面重新加载或超链接上的特定标签

但是该链接的解决方案仅适用于您转到另一个页面的情况，并且在同一页面上不起作用。 我仍然不知道如何将其实现为表单。

我试过

<form action"javascript:function()">...</form>

并且有一个函数可以完成我需要的功能，但是 javascript 在 action 属性中并不能很好地工作。

我怎样才能做到这一点？

编辑：通过引导程序文档后，我仍然没有找到解决我的问题的方法。 重申一下，在您提交表单后，我需要转到一个不是主要或活动选项卡的选项卡。

Answer 1

我终于自己想通了。 仍然为我没有得到帮助而生气。 对于我这样做的表格：

<form action="profile.php#editinfo" method="post">
...
</form>

然后我添加了一个脚本，它只能完成这项工作，因为它是最后一个选项卡，但可以修改：

<script>
var url = window.location.href;
var hash = url.substring(url.indexOf("#"));
if (hash == "#editinfo")
{
$(function(){
$('#tabmenu a:last').tab('show');
});
}
 </script>

我宁愿转到带有 id #editinfo 的选项卡，但是在更改此选项时

$('#tabmenu a:last').tab('show');

对此

$('#tabmenu a:[href="#editinfo"]').tab('show');

它将不再起作用。 只是乱搞并多次阅读文档。

Answer 2

从三个不同的引导程序选项卡提交三种不同的表单时，我遇到了类似的问题。 默认情况下，它将我重定向到主/活动选项卡。 我通过发送一个带有重定向 URL 的字符串并检查视图文件中的字符串来解决它，如下所示。 $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 是锚标签的类。

<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>

这并不完全是您想要的，但是与我有类似问题的人可以从中受益。

Answer 3

You need to change the "data-tab-destination" on current tab, try this working demo 

http://jsfiddle.net/stanze/3hJ46/67/