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

时间:2015-03-18 05:34:17

标签: javascript html forms twitter-bootstrap tabs

我已经在这里看了很多关于这个问题的不同主题,但没有一个完全回答我的问题。

我在表格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 Tabs: Go to Specific Tab on Page Reload or Hyperlink

但该链接的解决方案仅限于您转到另一个页面,并且不在同一页面上工作。我仍然不知道如何将其实现为一种形式。

我试过

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

并且有一个功能可以完成我所需要的功能,但javascript在action属性中不起作用。

我怎样才能做到这一点?

编辑: 在完成bootstrap文档后,我仍然没有找到解决问题的方法。要重申,我需要在提交表单后转到不是主要或有效选项卡的选项卡。

3 个答案:

答案 0 :(得分: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');

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

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

我从引导标签提交三个不同的表单时遇到类似的问题,它会将我重定向到主/主页标签。所以我通过发送一些带有重定向url的字符串并检查视图文件中的字符串来解决它,如下所示。假设$ type是传递给视图文件的字符串

<script>
    $( function() {
       <?php if($type == 'string1')
       {
            ?>
           $('.tab1').click();
           <?php
        }
        if($type == 'string2')
        {
            ?>

           $('.tab2').click();
            <?php
        }
        if($type == 'string3'){
           ?>
           $('.tab3').click();
           <?php
        }
        ?>
      });

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

虽然已经很晚才有人遇到类似我的问题可以从中受益。