Question

我有一个页面home.php。在页面上，我有CSS标签tab1和tab2。选项卡位于同一页面上，而不是不同的页面。我希望每当我点击tab2内容中的提交按钮时都会显示tab2的内容，而不是将我带回tab1。如何使用JavaScript来实现此行为？

<html>
<head>
<title>home</title>
</head>
<link href="SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<body>
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Tab1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab2</li>
</ul>

<div class="TabbedPanelsContentGroup">

<div class="TabbedPanelsContent">
//this is where the content of the tab1 will be and i have another form in this content too

</div>

<div class="TabbedPanelsContent">
//this is where the content of the tab2 will be
<form action="home.php" method="post">
<?php
if (isset($_POST['submit'])) {
if(empty($_POST['boded']){
echo"Please do it again.";
}else{
 $mgs = ($_POST['boded']);
 //then insert to my database   
}
?>
<textarea id="message" name="boded" rows="5" cols="40"></textarea>
<input type="submit" name="submit" value="Submit" />
//if i click this button(submit) in this content it should display tab2 content not tab1
</form>
</div>

</div>
</body>
</html>

我已经尝试过第一个人要我做的事情;它有效，但有一个问题：提交按钮没有发送到$_POST['submit']是否由于我的按钮中的错误（<input type="submit" name="submit" value="Submit" onClick="show_content('div_2'); return false;"/>）我在tab2内容中提到了我有一个PHP代码，它接收发送给它的按钮。

以上是我重新编辑的代码，如果您在make代码上进行编辑，我将不胜感激。

Answer 1

您是否实际上已将表单提交给Web服务器并重新向您发送页面信息，或者只是运行javascript函数的提交按钮并且您保持在同一页面上？

如果您正在重新加载页面内容，那么当您单击“提交”时，您需要向服务器发送您之前所使用的选项卡，以便在发送新页面时进行调整以更改默认选项卡。这可能涉及将“当前”类移至其他标签，或将display: none;放在原始“开始标签”上，将display: block;放在新标签上。

有两种方法可以做到这一点。如果每个标签都有一个表单，则只需在表单中输入<input type="hidden" name="tab" value="2" />即可。这样，当您提交表单以及其他值时，它会提醒服务器您所在的选项卡。但是，如果您有一个延伸到每个选项卡的单个表单，则这不起作用。在这种情况下，您将提交每个隐藏输入，并且因为它们具有相同的名称，所以通常只发送最后一个。

如果您有多个表单，那么解决方案是更改<input type="submit" />按钮的值或名称。实际上可以像任何其他输入一样检查它的值，因此在服务器端（在PHP中，在本例中），您可以执行以下操作之一：

(changed name of input per tab):
if(isset($_POST["submit_tab2"]){
    // They were on tab 2
}

(changed value):
if($_POST["submit"] == "Click here to submit tab 2!"){
    // They were on tab 2
}

单击按钮时如何显示选项卡的内容

1 个答案: