用javascript提交的窗体打开标签提交

我有一个非常简单的窗体示例，它被分成了一些标签，它被发布到自己的验证和处理与PHP，简化版本的代码如下（没有验证和处理步骤）：用javascript提交的窗体打开标签提交

<style> 
/* Style the list */ 
ul.tab { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    border: 1px solid #ccc; 
    background-color: #f1f1f1; 
} 

/* Float the list items side by side */ 
ul.tab li {float: left;} 

/* Style the links inside the list items */ 
ul.tab li a { 
    color: black; 
    display: inline-block; 
    font-size: 15px; 
    font-weight: lighter; 
    padding: 14px 16px; 
    text-align: center; 
    text-decoration: none; 
    transition: all 0.3s ease 0s; 
} 

/* Change background color of links on hover */ 
ul.tab li a:hover {background-color: #ddd;} 

/* Create an active/current tablink class */ 
ul.tab li a:focus, .active {background-color: #ccc;} 

/* Style the tab content */ 
.tabcontent { 
    display: none; 
    padding: 60px 10px; 
    border: 1px solid #ccc; 
    border-top: none; 
    margin-bottom: 20px; 
} 
</style> 

<ul class="tab"> 
<li><a href="#" class="tablinks" onclick="openTab(event, 'tab_1')">tab 1</a></li> 
<li><a href="#" class="tablinks" onclick="openTab(event, 'tab_2')">tab 2</a></li> 
</ul> 

<!-- FORM Starts --> 
<form method="POST" action=""> 
<div id="tab_1" class="tabcontent"> 
Tab One Content 
</div> 

<div id="tab_2" class="tabcontent"> 
Tab Two Content 
</div> 

<input type="submit" name="save_settings_button" value="Save Settings" /> 
</form> 

<script> 
function openTab(evt, tabName) { 
    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(tabName).style.display = "block"; 
    evt.currentTarget.classList.add("active"); 
} 

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

这有助于大单分解成部分。然而如果在选项卡用户，并按下提交按钮，他们会回到标签之一，不是一个很好的用户体验！

有没有什么办法可以在提交表单时识别哪个选项卡处于焦点状态，然后在页面重新加载后重新加载该选项卡上的页面？

来源

2017-04-21 user1419810

由于您在提交表单后处理了所有与php有关的事情，因此在页面刷新后知道活动选项卡的唯一方法是在表单中添加自定义字段并在更改选项卡时进行更新。

所以在你的HTML

<input type="hidden" id="active_tab" name="active_tab" value="tab_1" />

那么你应该编辑openTab功能时，它被称为更新此输入。

document.getElementById("active_tab").value = tabName;

现在在PHP中，加载你的页面，当你添加一个新的变量来捕获活动标签和更新活动类的标签。

$active_tab = $_POST['active_tab']; 
$active_tab1 = ""; 
$active_tab2 = ""; 
if ($active_tab ==="tab_1") $active_tab1 = "active"; 
if ($active_tab ==="tab_2") $active_tab2 = "active";

然后上次更新您的选项卡以使用活动类。

<div id="tab_1" class="tabcontent <?php echo $active_tab1; ?>">...</div> 
div id="tab_2" class="tabcontent <?php echo $active_tab2; ?>">...</div>

这是不是要走不过，对于更好的用户体验我会改变一切形式的最佳方式提交给Ajax调用和处理外部PHP文件的一切。

来源

2017-04-21 12:30:05

我会检查是否存在active类，以确定哪个选项卡当前处于活动状态。例如类似tablink.classList.contains('active')的东西。

来源

2017-04-21 12:19:45 heylookltsme

用javascript提交的窗体打开标签提交

回答

相关问题