在表单提交时保持选项卡打开 - 没有Ajax

时间:2016-12-12 06:22:59

标签: javascript php

我有一个基于以下标签的标签表格:

<ul class="tab">
<li><a href="#" class="tablinks" onclick="openCity(event, 'London')">London</a></li>
<li><a href="#" class="tablinks" onclick="openCity(event, 'Sydney')">Sydney</a></li>
</ul>

当用户点击标签时,他们会被带到相应的城市:

<script>
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tabcontent.length; i++) {
        tablinks[i].classList.remove("active");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.classList.add("active");
}
</script>

<script>
var mybtn = document.getElementsByClassName("tablinks")[0];
mybtn.click();
</script>

我正在使用php来处理表单并希望保留用户在提交表单时(即重新加载表单时)所使用的当前选项卡而不使用AJAX这可能吗?

2 个答案:

答案 0 :(得分:2)

是的,您可以将表单提交到该页面中的iframe。

<form action="process.php" method="post" target="result_frame">
    <input type="submit" value="Do Stuff!" />
</form>
<iframe name="result_frame"></iframe>

process.php的输出将显示在iframe result_frame

答案 1 :(得分:0)

试试这个

在PHP中

$TAB_ACTIVE = array(false, false, false);
$TAB_ACTIVE[(isset($_GET['tab']) && in_array((int) $_GET['tab'], array(0, 1, 2)) ? (int) $_GET['tab'] : 0)] = true;

在HTML标题页标题中

<ul class="nav nav-tabs">
                    <li<?php print ($TAB_ACTIVE[0] ? ' class="active"' : ''); ?>><a href="yourpage.php?tab=0" data-toggle="tab">Activity Log</a></li>
                    <li<?php print ($TAB_ACTIVE[1] ? ' class="active"' : ''); ?>><a href="yourpage.php?tab=1" data-toggle="tab">General</a></li>
                    <li<?php print ($TAB_ACTIVE[2] ? ' class="active"' : ''); ?>><a href="yourpage.php?tab=2" data-toggle="tab">Password</a></li>
                </ul>

在HTML标签页正文

<div class="tab-content">
                    <div class="tab-pane<?php print ($TAB_ACTIVE[0] ? ' active' : ''); ?>">
</div>
<div class="tab-pane<?php print ($TAB_ACTIVE[1] ? ' active' : ''); ?>">
</div>
<div class="tab-pane<?php print ($TAB_ACTIVE[2] ? ' active' : ''); ?>">
</div>
</div>