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

Question

我在这里查看了许多关于这个问题的不同主题，但 none 准确地回答了我的问题。

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

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

它使用了这个函数：

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

另一个流行的link： Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink

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

我试过了

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

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

我怎样才能做到这一点？

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

Answer 1

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

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

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

它将不再有效。只是乱逛并多次阅读文档。

Answer 3

我在从三个不同的 bootstrap 选项卡提交三个不同的表单时遇到了类似的问题。默认情况下，它会将我重定向到 primary/active 选项卡。我通过发送带有重定向 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 是 class 锚标签。

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

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

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

Bootstrap tabs go to specific tab on same page after form submit

html

javascript

forms

tabs

twitter-bootstrap