Question

我有几个标签，每次选择一个标签时，表单都会被提交，向变量发送一个不同的值（对用户隐藏）。如果我说从TAB1到TAB2，变量99将获得值2，TAB3将获得值3等等....我遇到的问题是，当我选择TAB2时，我不希望页面恢复到TAB1。这是我的代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Submit a Form on Tab Click</title>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>


<style type="text/css">
</style>

<script>
$(function() {
$("#Main").tabs();
$('[id^=ui-id-]').click(function(){
var tabId = $(this).attr('id');
var tabNum = tabId.split('-')[2];
$('#form-' + tabNum).submit();
});
});
</script>


</head>

<body>



<div id="Main">
<ul>
<li><a href="#Tab1">Tab1</a></li>
<li><a href="#Tab2">Tab2</a></li>
<li><a href="#Tab3">Tab3</a></li>
<li><a href="#Tab4">Tab4</a></li>
<li><a href="#Tab5">Tab5</a></li>
<li><a href="#Tab6">Tab6</a></li>
</ul>

<form id="form-1" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="1">
</form>   

<form id="form-2" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="2">
</form> 

<form id="form-3" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="3">
</form>

<form id="form-4" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="4">
</form>

<form id="form-5" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="5">
</form>

<form id="form-6" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="6">
</form>

<div id="Tab1">
<p>Tab1</p> 
</div>
<div id="Tab2">
<p>Tab2</p>
</div>
<div id="Tab3">
<p>Tab3</p>
</div>
<div id="Tab4">
<p>Tab4</p>
</div>
<div id="Tab5">
<p>Tab5</p>
</div>
<div id="Tab6">
<p>Tab6</p>
</div>
</div>


</body>
</html>

现在这是我的代码，我删除了一些自那以后没有做的事情：

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Submit a Form on Tab Click</title>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>


<style type="text/css">
</style>

<script>
$(function() {//Open function
$("#Main").tabs();
$('[id^=ui-id-]').click(function(){ //Open [id^=ui-id-]

       if (tabId == 'ui-id-1')
     {
        doAjax('1');
        }
    else if (tabId == 'ui-id-2') 
     {
      doAjax('2');
     }
    else if (tabId == 'ui-id-3') 
     {
      doAjax('3');
     }
function doAjaxSubmit(formID) { //Open doAjaxSubmin
$.ajax({
    type: "POST",
    url: "Tab_Click_v00.html",
    data: "Nb_var99=" + formID,
})
} //Close doAjaxSubmin
}); //Close [id^=ui-id-]
});//Close function
</script>


</head>

<body>



<div id="Main">
<ul>
<li><a href="#Tab1">Tab1</a></li>
<li><a href="#Tab2">Tab2</a></li>
<li><a href="#Tab3">Tab3</a></li>
<li><a href="#Tab4">Tab4</a></li>
<li><a href="#Tab5">Tab5</a></li>
<li><a href="#Tab6">Tab6</a></li>
</ul>



 <div id="Tab1">
 <p>Tab1</p> 
 </div>
 <div id="Tab2">
 <p>Tab2</p>
 </div>
 <div id="Tab3">
 <p>Tab3</p>
 </div>
 <div id="Tab4">
 <p>Tab4</p>
 </div>
 <div id="Tab5">
 <p>Tab5</p>
 </div>
 <div id="Tab6">
 <p>Tab6</p>
 </div>
 </div>


</body>
</html>

这不起作用。它还杀死了CSS风格？我会继续努力。

Answer 1

根据您的目标，您无需使用<form>和<input>。

根据点击的标签，您可以通过AJAX将1或2或3发送到所需的HTML页面。

当您有多个字段并希望将其数据发布到另一个服务器页面进行处理时，<form>构造非常好。但是，在您的情况下，您似乎只希望将值发送到另一个页面，然后返回。

使用AJAX，这是一种方法：

$(document).ready(function() {
    $( "#Main" ).tabs();

    $('[id^=ui-id-]').click(function() {

        if (tabId == 'ui-id-1') {
            doAjax('1');
        }else if (tabId == 'ui-id-2') {
            doAjax('2');
        }else if (tabId == 'ui-id-3') {
            doAjax('3');
        }

    }); //END ui-id-#.click fn
}); //END document.ready

function doAjaxSubmit(formID) {
    $.ajax({
        type: "POST",
        url: "myphpprocessor.php",
        data: "Nb_var99=" + formID,
    })
    .done(function( recd_from_PHP ) {
        //No need to put ANYTHING in here, but for eg, you can do:

        //AS AN EXAMPLE ONLY, display message sent from server side
        alert("PHP side said: " + recd_from_PHP);

        //AS AN EXAMPLE ONLY, click the third tab...
        $('[id^=ui-id-3]').click();
    });

}

另一种发送表单数据的方式（使用<form>按预期方式）是在页面上创建隐藏的<iframe>，其中包含Tab_Click_v00.html页面 - 然后POST到该页面。

由于表单的目标已经在<iframe>的页面上，因此当前页面不应该重新生成。并且因为<iframe>被隐藏，用户不应该看到任何异常。

Answer 2

鉴于您使用的是jQuery Tabs控件，您可以使用window.location.hash并绑定到load事件（并使用active选项显示相应的标签）：

$(window).load(function(){
  if(window.location.hash){
    $('#main').tabs('option','active',window.location.hash.substring(1));
  }
});

然后使用somepage.html#tabindex

重定向用户

Answer 3

这是一个新的答案，请尝试这个。

这个答案也使用了AJAX。我将发布另一个示例，解决您的请求，以获取有关隐藏的iframe想法的更多信息。

请注意，当您从Tab切换到Tab时，用户仍保留在选项卡上。

只需复制/粘贴到两个文件中：
index.php （或您想要命名的任何内容），以及
myphpprocessor.php （如果更改此文件的名称，还必须在AJAX代码块中更改其名称

index.php （或mytest.html，或其他）

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />

    <style>
        #msg{width:30%;height:80px;padding:10px;margin-top:20px;background-color:wheat;}
        .hidden{display:none;}
    </style>

        <script type="text/javascript">
            $(document).ready(function() {

                $( "#Main" ).tabs();

                $('[id^=ui-id-]').click(function() {
                    var tabId = $(this).attr('id');

                    if (tabId == 'ui-id-1') {
                        doAjax('1');
                    }else if (tabId == 'ui-id-2') {
                        doAjax('2');
                    }else if (tabId == 'ui-id-3') {
                        doAjax('3');
                    }else if (tabId == 'ui-id-4') {
                        doAjax('4');
                    }else if (tabId == 'ui-id-5') {
                        doAjax('5');
                    }

                }); //END ui-id-#.click fn
            }); //END document.ready

            function doAjax(formID) {
                $.ajax({
                    type: "POST",
                    url: "myphpprocessor.php",
                    data: "Nb_var99=" + formID,
                })
                .done(function( recd_from_PHP ) {
                    //No need to put ANYTHING in here, but for eg, you can do:
                    //alert('In done fn...');

                    //AS AN EXAMPLE ONLY, display message sent from server side
                    //alert("PHP side said: " + recd_from_PHP);
                    $('#msg').html('<h2>Here is what the PHP side sent:</h2>' + recd_from_PHP);

                    //AS AN EXAMPLE ONLY, click the third tab...
                    //$('[id^=ui-id-3]').click(); //Warning, this will cause endless loop -- but just demonstrating
                });

            }
        </script>
    </head>
<body>

    <div id="Main">
        <ul>
            <li><a href="#Tab1">Tab1</a></li>
            <li><a href="#Tab2">Tab2</a></li>
            <li><a href="#Tab3">Tab3</a></li>
            <li><a href="#Tab4">Tab4</a></li>
            <li><a href="#Tab5">Tab5</a></li>
            <li><a href="#Tab6">Tab6</a></li>
        </ul>

        <form id="form-1" action="Tab_Click_v00.html" method="post">
            <input type="hidden" name="Nb_var99" value="1">
        </form>   

        <form id="form-2" action="Tab_Click_v00.html" method="post">
            <input type="hidden" name="Nb_var99" value="2">
        </form> 

        <form id="form-3" action="Tab_Click_v00.html" method="post">
            <input type="hidden" name="Nb_var99" value="3">
        </form>

        <form id="form-4" action="Tab_Click_v00.html" method="post">
            <input type="hidden" name="Nb_var99" value="4">
        </form>

        <form id="form-5" action="Tab_Click_v00.html" method="post">
            <input type="hidden" name="Nb_var99" value="5">
        </form>

        <form id="form-6" action="Tab_Click_v00.html" method="post">
            <input type="hidden" name="Nb_var99" value="6">
        </form>

        <div id="Tab1">
            <p>Tab1</p> 
        </div>
        <div id="Tab2">
            <p>Tab2</p>
        </div>
        <div id="Tab3">
            <p>Tab3</p>
        </div>
        <div id="Tab4">
            <p>Tab4</p>
        </div>
        <div id="Tab5">
            <p>Tab5</p>
        </div>
        <div id="Tab6">
            <p>Tab6</p>
        </div>
    </div>

    <div id="msg"></div>

</body>
</html>

服务器端： myphpprocessor.php （必须以.php结尾）

<?php

    $id = $_POST['Nb_var99'];

    if ($id == 4) {
        $msg = "Return of the Tab Four";
    }else{
        $msg = 'PHP side receieved: ' .$id;
    }

    echo $msg;

与往常一样，请提供任何对您有帮助的答案，并选择正确答案，以便在满意后结束该问题。