表单提交后，引导选项卡转到同一页面上的特定选项卡答案

【问题标题】：Bootstrap tabs go to specific tab on same page after form submit表单提交后，引导选项卡转到同一页面上的特定选项卡
【发布时间】：2015-05-20 19:23:21
【问题描述】：

我在这里查看了很多关于这个问题的不同主题，但没有一个能准确回答我的问题。

我在选项卡 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();
    });

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

我试过了

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

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

我怎样才能做到这一点？

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

【问题讨论】：

标签： javascript html forms twitter-bootstrap tabs

【解决方案1】：

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

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

【讨论】：

我相信您没有阅读我的问题。提交选项卡 2 上的表单后，我需要将选项卡更改回选项卡 2。而且您的演示甚至无法正常工作。

【解决方案2】：

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

<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');

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

【讨论】：

【解决方案3】：

从三个不同的引导选项卡提交三个不同的表单时，我遇到了类似的问题。默认情况下，它会将我重定向到主要/活动选项卡。我通过发送带有重定向 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>

这不是你想要的，但有类似问题的人可以从中受益。

【讨论】：