表單提交后，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/