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

【问题标题】：How to display the content of a tab when a button is clicked单击按钮时如何显示选项卡的内容
【发布时间】：2010-10-28 18:50:28
【问题描述】：

我有一个页面，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代码上进行编辑，我将不胜感激。

【问题讨论】：

请修正您的代码粘贴（缩进 4 个空格，或在所选内容上使用 ctrl+k）
另外，请在您的问题中添加一些标点符号和大写字母。我很确定里面肯定不止一句话。

标签： php javascript html css ajax

【解决方案1】：

您是否真的将表单提交到网络服务器并重新向您发送页面信息，或者提交按钮只是运行一个 javascript 函数而您仍然在同一页面上？

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

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

如果您有多个表单，那么解决方案是更改 <input type="submit" /> 按钮的值或名称。实际上可以像检查任何其他输入一样检查 this 的值，因此在服务器端（在此示例中为 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
}

【讨论】：