Question

首先，这与刷新页面不同，我需要的是在提交表单后发生的事情。

表单以PHP格式处理。

HTML code：

    <div class="row">

    <div class="col-md-2">
        <h2>Menu</h2>
        <hr />
        <div class="tabbable tabs-left" id="myTab">
          <ul class="nav nav-tabs">
            <li class="active"><a href="#1" data-toggle="tab">Home</a></li>
            <li><a href="#2" data-toggle="tab">Manage categories</a></li>
            <li><a href="#3" data-toggle="tab">Manage sections</a></li>
            <li><a href="#4" data-toggle="tab">Manage Users</a></li>
            <li><a href="#5" data-toggle="tab">Manage warnings</a></li>
          </ul>
        </div>
    </div>
    <div class="col-md-10">
        <h2>Content</h2>
        <hr />
        <div class="tab-content">
         <div class="tab-pane active" id="1"><?php require'include/home.php'; ?></div>
         <div class="tab-pane" id="2"><?php require'include/categories.php'; ?></div>
         <div class="tab-pane" id="3"><?php require'include/sections.php'; ?></div>
         <div class="tab-pane" id="4"><?php require'include/users.php'; ?></div>
         <div class="tab-pane" id="5"><?php require'include/warnings.php'; ?></div>
        </div>
    </div>
</div>

在categories.php中是一个使用post方法的表单。

我发现在刷新但没有提交表单后工作的JQuery是这样的：

<script>
$('#myTab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
});

// store the currently selected tab in the hash value
$("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) {
    var id = $(e.target).attr("href").substr(1);
    $.cookie('activeTab', id);
});

    // on load of the page: switch to the currently selected tab
    var hash = $.cookie('activeTab');
    if (hash != null) {
        $('#myTab a[href="#' + hash + '"]').tab('show');
    }
</script>

Answer 1

如果您不想在提交表单后更改任何内容，除非更改特定位置的数据，您可以使用AJAX。只需在提交按钮上创建一个onclick函数而不实际提交表单，从该调用AJAX函数，导入所需的数据然后插入它。

PS：AJAX非常简单，只需查看一个简单的示例即可获得。这是一个例子

<script>
    function ajax(){
        var hr = new XMLHttpRequest();
        var doc = document.getElementById("ajax_here");
        hr.onreadystatechange = function(e){
            if(hr.readyState==4 && hr.status==200){
                doc.innerHTML = hr.responseText;
            }
        }
        var url = "about.php";   // From the destination file which 
                                 // contains required data.
        hr.open("POST",url,true);
        hr.setRequestHeader('Content-type', 'text/html');
        hr.send();
        doc.innerHTML = "processing...";
    }
 </script>
    <body>
    <p onclick="ajax()">Click here for something awesome</p>

如何在提交表单后让Bootstrap选项卡保持不变？

1 个答案: