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

Question

I have a page, home.php . 我有一个页面home.php 。 On the page, I have CSS tabs tab1 and tab2 . 在页面上，我有CSS选项卡tab1和tab2 。 The tabs are on the same page not different pages. 选项卡在同一页面上，而不是不同页面。 I want the content of tab2 to display whenever I click the submit button in the content of tab2 , not take me back to tab1 . 我想要的内容tab2 ，以显示每当我点击的内容提交按钮tab2 ，不带我回tab1 。 How can I use JavaScript to implement this behavior? 如何使用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>

I have tried what the first person asked me to do; 我已经尝试了第一个人要求我做的事情； it works, but there was a problem: the submit button did not send to the $_POST['submit'] whether it because of the false in my button ( <input type="submit" name="submit" value="Submit" onClick="show_content('div_2'); return false;"/> ) I fall I mention that in tab2 content I have a PHP code that receives the button send to it. 它有效，但是存在一个问题：提交按钮是否由于我的按钮中的false而没有发送到$_POST['submit'] （ <input type="submit" name="submit" value="Submit" onClick="show_content('div_2'); return false;"/> ）我跌倒了，我提到在tab2内容中，我有一个PHP代码来接收发送给它的按钮。

Above is my re-edited code, I will appreciate it if you edit on make code. 上面是我重新编辑的代码，如果您对make代码进行编辑，我将不胜感激。

Answer 1

Do you actually have the form submitting to the web server and re-sending you the page information, or is the submit button just running a javascript function and you remain on the same page? 您实际上是将表单提交到Web服务器并重新发送页面信息，还是“提交”按钮仅运行javascript函数，并且您停留在同一页面上？

If you're reloading the page content then when you click submit you need to send the server what tab you were on before so it can make an adjustment to change the default tab when it sends the new page. 如果要重新加载页面内容，则在单击“提交”时，需要向服务器发送之前使用的选项卡，以便它可以进行调整以在发送新页面时更改默认选项卡。 This might involve moving the "current" class to a different tab or putting display: none; 这可能涉及将“当前”类移动到其他选项卡或放置display: none; on the original "starting tab" and display: block; 在原始的“开始”标签上并display: block; on the new one. 在新的。

There are two ways to do this. 有两种方法可以做到这一点。 If you have one form per tab, you just need a <input type="hidden" name="tab" value="2" /> input in your form. 如果每个选项卡只有一个表单，则只需在表单中<input type="hidden" name="tab" value="2" /> 。 This way when you submit the form along with the other values it reminds the server which tab you were on. 这样，当您提交表单以及其他值时，它会提醒服务器您在哪个选项卡上。 This doesn't work if you have a single form that stretches over every tab, however. 但是，如果您有一个跨每个选项卡的表单，则此方法不起作用。 In that case you would be submitting every hidden input, and since they have the same name only the last one is usually sent. 在这种情况下，您将提交每个隐藏的输入，并且由于它们具有相同的名称，因此通常只发送最后一个。

If you have multiple forms then the solution would be to change the value or name of your <input type="submit" /> button. 如果您有多种形式，则解决方案是更改<input type="submit" />按钮的值或名称。 It's actually possible to check the value of this just like any other input, so on the server side (in PHP, in this example) you could do one of the following: 实际上，可以像检查其他任何输入一样检查此值，因此在服务器端（在此示例中为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 个解决方案

解决方案1
0 2010-10-28 22:42:32

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

问题描述

1 个解决方案

解决方案1 0 2010-10-28 22:42:32

解决方案1
0 2010-10-28 22:42:32